外部スクリプト：要素の汎用折りたたみ

指定要素の表示・非表示のトグル（折りたたみや開閉とよばれるもの）を、簡単な記述で実現します。

特徴

テンプレートに記述してメニューの開閉や、投稿欄に記述して”続き”の折りたたみなどができます。
初期表示の方法を選べます。1ページ内に複数記述、併用も可能です。
1. 最初は折りたたまれていて、クリックされたら開く。（予約className：.js_close）
2. 最初は開いていて、クリックされたら折りたたむ。（予約className：.js_open）
ユーザは折りたたみたい要素に、予約classNameを指定するだけでOK。HTMLを調べて、折りたたみたい要素のひとつ前の要素に自動でトグルスイッチの機能を割り当てます。
jsファイルを編集することで、スタイルシートの記述方法を使い、トグルスイッチになる要素のオンマウス時とマウスアウト時の文字色/背景色を設定できます。（トグルスイッチであることをユーザにアピールするため）
オリジナルのタイトルを保持したまま、トグルスイッチになる要素のtitle属性に、簡単な説明を加えます。
FC2管理画面から予約className、またはサブクラスにユーザ独自の装飾（枠線、回り込みなど）も行えます。

動作サンプル

月別

HTML

<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要素がスイッチになります。

今日の一枚

HTML

<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>

入れ子構造なども可能です。

1段目
- 2段目
  - 3段目
    ラスト

HTML

<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'; // マウスアウトの背景色

の部分です。

”FC2管理画面”→”ファイルのアップロード”（ツール）→”アップロードするファイルの選択” と進み、jsファイルをアップロードします。
”ファイル情報”で”このファイルでエントリー”を選択をクリック。新しい窓が開き、投稿欄に以下のようなコードが書き込まれます。
<a href="http://blogNO.fc2.com/IDの一文字目/ID/file/fold.js" target="_blank">fold.js</a>
このファイル名http://blogNO.fc2.com/IDの一文字目/ID/file/fold.jsの部分をメモしておきます。
”FC2管理画面”→”テンプレートの設定”（環境設定）→”テンプレートの編集” と進み、現在選択されているスタイルの修正を開きます。
”HTMLの編集”の欄を以下のように編集します。（必須）
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
<meta http-equiv="content-style-type" content="text/css" />

<meta http-equiv="content-script-type" content="text/javascript" />

<link href="<%css_link>" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" />

<script src="http://blogNO.fc2.com/IDの一文字目/ID/file/fold.js" type="text/javascript" charset="euc-jp"></script>

<title><%blog_name><%sub_title></title>

テンプレートのHTML編集欄、または、投稿欄で折りたたみたい文章、イメージ、リストなどを適切な要素でマークアップし、お好みの予約classNameを設定すれば完成です。

作成日 2005-04-01