blog でソースコードなどを提示するとき、コード行数が多いものを全文表示すると本文がコード例に埋まってしまうので、折りたたんで表示したい。その方法について調査してみました。(*1)

　コード例は以下。

<button 
    onclick="document.getElementById('target').style.height='Auto';"
    style="margin:0px 10px;">ひらく
</button><button 
    onclick="document.getElementById('target').style.height='6em';"
    style="margin:0px 10px;">とじる
</button>
<blockquote id="target" style="height:6em; overflow: scroll; padding:10px;">

ここにコンテンツを書く

</blockquote>

　上記のコード例がやっていることは以下。

1. ブロック要素 (上記例では blockquote) を配置し、そのブロック要素に ID (上記例では 'target') を付与
2. 当該 ID のブロック要素の height を javascript で操作
   1. 開くボタンは、高さに"自動"を設定 (上記例では height='Auto')
   2. 閉じるボタンは、高さに固定値を設定 (上記例では height='6em')
3. 当該 ID のブロックは、最初は閉じた状態と同じにしておく (上記例では style="height:6em;)
4. コンテンツ本体は、当該 ID のブロック要素の中に記述

　上記のコード例を実装すると以下。(*2)

ひらく
とじる

朕深く世界の大勢と帝国の現状とに鑑み非常の措置を以て時局を収拾せむと欲し茲に忠良なる爾臣民に告く

朕は帝国政府をして米英支ソ四国に対し其の共同宣言を受諾する旨通告せしめたり

抑々帝国臣民の康寧を計り万邦共栄の楽を偕にするは皇祖皇宗の遺範にして朕の拳々措かさる所先に米英二国に宣戦せる所以も亦実に帝国の自存と東亜の安定とを庶幾するに出て他国の主権を排し領土を侵すか如きは固より朕か志にあらす然るに交戦既に四歳を閲し朕か陸海将兵の勇戦朕か百僚有司の励精朕か一億衆庶の奉公各々最善を尽せるに拘らす戦局必すしも好転せす世界の大勢亦我に利あらす加之敵は新に残虐なる爆弾を使用して頻に無辜を殺傷し惨害の及ふ所真に測るへからさるに至る而も尚交戦を継続せむか終に我か民族の滅亡を招来するのみならす延て人類の文明をも破却すへし斯の如くむは朕何を以てか億兆の赤子を保し皇祖皇宗の神霊に謝せむや是れ朕か帝国政府をして共同宣言に応せしむるに至れる所以なり

朕は帝国と共に終始東亜の解放に協力せる諸盟邦に対し遺憾の意を表せさるを得す帝国臣民にして戦陣に死し職域に殉し非命に斃れたる者及其の遺族に想を致せは五内為に裂く且戦傷を負ひ災禍を蒙り家業を失ひたる者の厚生に至りては朕の深く軫念する所なり惟ふに今後帝国の受くへき苦難は固より尋常にあらす爾臣民の衷情も朕善く之を知る然れとも朕は時運の趨く所堪へ難きを堪へ忍ひ難きを忍ひ以て万世の為に太平を開かむと欲す

朕は茲に国体を護持し得て忠良なる爾臣民の赤誠に信倚し常に爾臣民と共に在り若し夫れ情の激する所濫に事端を滋くし或は同胞排擠互に時局を乱り為に大道を誤り信義を世界に失ふか如きは朕最も之を戒む宜しく挙国一家子孫相伝へ確く神州の不滅を信し任重くして道遠きを念ひ総力を将来の建設に傾け道義を篤くし志操を固くし誓て国体の精華を発揚し世界の進運に後れさらむことを期すへし爾臣民其れ克く朕か意を体せよ

(*1)
　勉強も兼ねて jQuery で…と思ったが、すごい広島#34 に参考書等々を持ち込み忘れたので断念し、素の javascript で css を操作する方法としました。
(*2)
　コンテンツ部分はいい加減です。読みにくいので、カタカナ・旧字体を、ひらがな・新字体にしてみましたが、正しく変換できているかどうかは保証の限りではありません。