エントリーの複数回折りたたみ（その2）

2006年4月18日　開閉リンクのタグ（JavaScript部分）を変更しました。

今日は、エントリーの複数回折りたたみの2回目として、折りたたみ部分のタグの組み方を解説します。

1.折りたたむ部分をdivタグで囲む

まず、折りたたむ部分全体を、divタグで囲みます。
その際、ｉｄアトリビュートを指定して、div要素にＩＤを割り当てます。
また、「class="multifold"」も指定します。

例えば、画像の表示／非表示を切り替えたい場合だと、以下のようにタグを組みます。

<div id="some_image" class="multifold">
<p><img src="画像のURL" width=・・・ /></p>
</div>

なお、エントリー内にタグを直接入力しますので、エントリーの内容をそのまま出力するようにした方が良いでしょう（改行を自動的に変換したりしない）。

2.折りたたみ部分を開閉するためのタグを入れる

次に、折りたたみ部分の前か後ろに、その部分を開閉するためのaタグを入れます。
そのタグは以下のようなものです。

<a id="○○○_c" onclick="javascript:void(multifold('○○○'));">□□□を開く</a>

「○○○」の部分には、divタグにつけたIDを指定します。
また、「□□□」には、折りたたんだ部分の名前を入れます。

例えば、手順1のように折りたたみ部分を作った場合だと、以下のようにaタグを入れると良いでしょう。

<a id="some_image_c" onclick="javascript:void(multifold('some_image'));">画像を開く</a>

これで、このリンクをクリックするたびに、折りたたんだ部分が開閉します。