指定要素の表示・非表示のトグル(折りたたみや開閉とよばれるもの)を、簡単な記述で実現します。
className
:.js_close)className
:.js_open)className
を指定するだけでOK。HTMLを調べて、折りたたみたい要素のひとつ前の要素に自動でトグルスイッチの機能を割り当てます。title
属性に、簡単な説明を加えます。className
、またはサブクラスにユーザ独自の装飾(枠線、回り込み など)も行えます。<dl class="arc">
<dt title="過去ログ">月別</dt>
<dd class="js_open">
<ul>
<li><a href="#" title="リンクはダミーです">2005-03</a></li>
<li><a href="#" title="リンクはダミーです">2005-02</a></li>
<li><a href="#" title="リンクはダミーです">2005-01</a></li>
<li><a href="#" title="リンクはダミーです">2004-12</a></li>
<li><a href="#" title="リンクはダミーです">2004-11</a></li>
</ul>
</dd>
</dl>
サイドバーのアーカイブリンクのイメージです。dd
要素はclassName
.js_open指定なので、初期表示は折りたたみされません。dd
要素のひとつ前のdt
要素がトグルスイッチになり、クリックするごとに開閉を繰り返します。また、以下のようなHTMLを投稿欄に記述した場合、img
要素にはclassName
.js_closeが指定されているため、はじめから折りたたまれp
要素がスイッチになります。
今日の一枚
<div style="text-align: center; line-height: 2;">
<p title="かげふみ" style="width: 400px; margin: auto;">
今日の一枚</p>
<img class="js_close" style="margin: auto;" src="kage.jpg" alt="かげふみ">
</div>
入れ子構造なども可能です。
<ul class="indent">
<li><span title="1段目">1段目</span>
<ul class="js_close">
<li><span title="2段目">2段目</span>
<ul class="js_close">
<li>3段目<br>ラスト</li>
</ul>
</li>
</ul>
</li>
</ul>
その他、日記のタイトルをクリックで本文を開閉させたりlegend
要素をスイッチにしてform
要素を折りたたむなど、アイディアしだいで応用できます。
トグルスイッチになる要素がないため、ある要素の最初の子要素(firstChild node)の折りたたみはできません。スクリプトは最初の子要素にclassName
が指定されていた場合、そのclassName
は無効にして処理をスキップします。
!
(コメントアウト)要素、script
(スクリプト)要素など表示されない要素にはスイッチは割り当てられません。a
(アンカー)要素やinput
(入力フィールド・ボタンなど)要素をスイッチにすることは可能ですが、ユーザを混乱させる原因になります。動作のある要素の後には指定しないほうがよいでしょう。
> fold.js
前準備として、ダウンロードしたファイルをメモ帳などで開いて編集します。(任意)
編集箇所は
mouse_on_color = '#00f', // マウスオンの文字色
mouse_on_background_color = '#eee', // マウスオンの背景色
mouse_out_color = '#333', // マウスアウトの文字色
mouse_out_background_color = '#fff'; // マウスアウトの背景色
の部分です。
<a href="http://blogNO.fc2.com/IDの一文字目/ID/file/fold.js" target="_blank">fold.js</a>
<meta http-equiv="content-script-type" content="text/javascript" />
<script src="http://blogNO.fc2.com/IDの一文字目/ID/file/fold.js" type="text/javascript" charset="euc-jp"></script>
テンプレートのHTML編集欄、または、投稿欄で折りたたみたい文章、イメージ、リストなどを適切な要素でマークアップし、お好みの予約className
を設定すれば完成です。