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

エントリーの複数回折りたたみの最終回として、「並列折りたたみ」と「直列折りたたみ」を解説します。

1.並列折りたたみ

エントリーの中に複数の折りたたみを入れ、それぞれの箇所の開閉を自由に変えられるようにすることを、「並列折りたたみ」と呼ぶことにします。
以下のようなイメージです。

1つ目の折りたたみを開く

2つ目の折りたたみを開く

このようにする場合は、折りたたみ部分のdivタグと、開閉のａタグを交互に入れます。
上の例だと、以下のようにタグを組んでいます。
黒字が1つ目の折りたたみ部分に対応し、赤字が2つ目の折りたたみ部分に対応します。

<div id="mfold_1_1" class="multifold">
<p>1つ目の折りたたみ部分です。</p>
</div>

<p><a id="mfold_1_1_c" href="javascript:void(multifold('mfold_1_1'));">1つ目の折りたたみを開く</a></p>

<div id="mfold_1_2" class="multifold">
<p>2つ目の折りたたみ部分です。</p>
</div>

<p><a id="mfold_1_2_c" href="javascript:void(multifold('mfold_1_2'));">2つ目の折りたたみを開く</a></p>

2.直列折りたたみ

折りたたみ部分の中にさらに折りたたみ部分を入れて、外側の折りたたみを開かないと、内側の折りたたみを開けないようにすることも考えられます。
このような折りたたみを、「直列折りたたみ」と呼ぶことにします。
以下のようなイメージです。

外側の折りたたみを開く

このようにするには、外側の折りたたみ部分（<div>～</div>）の中に、内側の折りたたみ部分を入れます。
例えば、上の例の場合だと、以下のようにタグを組んでいます。
黒字が外側の折りたたみに対応し、赤字が内側の折りたたみに対応しています。

<div id="mfold_2_1" class="multifold">
<p>外側の折りたたみ部分です。</p>

<div id="mfold_2_2" class="multifold">
<p>内側の折りたたみ部分です。</p>
</div>

<p><a id="mfold_2_2_c" href="javascript:void(multifold('mfold_2_2'));">内側の折りたたみを開く</a></p>

</div>

<p><a id="mfold_2_1_c" href="javascript:void(multifold('mfold_2_1'));">外側の折りたたみを開く</a></p>