HTML表示/非表示切り替えブロック；divとボタン

 HTML中に置く表示/非表示切り替えdivブロック

<div>名前付きのdivブロックのstyle.displayに'block'または'none’を指定することに より表示あるいは非表示にできます。

この説明文は下のHTML記述と同じ形の制御の中に 書いてあります。「なんだかんだ（説明文）」に相当します。

2つの<div>ブロックはどちらもボタン(input type="button")を持ち、 クリックされた時（onClick）に互いに相手のdisplayをblockにし、自分をnoneに することにより表示を入れ替えています。

説明が長くなる場合[説明を隠す]ボタンが先頭にあるだけでは 操作が難しくなるので、ブロックの最後にも於いてあります。
ただ説明ブロックを消すだけでは位置がおかしくなりますので document.locationも変更しています。
ブロックが短い場合は省略した方がすっきりします。

divのidに与える名前は自由です。ここでは"div_数"としています。 数を残し、"div_"を範囲内全置換する形で編集作業を行うのが確実です。

 HTML記述

開始時は閉じている

コピー

<div id="div_1">
<p><input type="button" value="説明を表示する" style="WIDTH:10em"
   onClick="document.getElementById('div_2').style.display='block';
            document.getElementById('div_1').style.display='none'"></p>
</div>
<div id="div_2" style="display:none">
<p><input type="button" value="説明を隠す" style="WIDTH:10em"
   onClick="document.getElementById('div_2').style.display='none';
            document.getElementById('div_1').style.display='block'"></p>
<p>
なんだかんだ。（説明文）
</p>
<p><input type="button" value="説明を隠す△" style="WIDTH:10em"
   onClick="document.getElementById('div_2').style.display='none';
            document.getElementById('div_1').style.display='block';
            document.location='#div_1'"></p>
</div>

開始時は開いている

コピー

<div id="div_1" style="display:none">
  <p>
    <input type="button" value="説明を表示する" style="width:10em"
      onClick="document.getElementById('div_2').style.display='block';
               document.getElementById('div_1').style.display='none'">
  </p>
</div>

<div id="div_2" style="display:block">
  <p>
    <input type="button" value="説明を隠す" style="width:10em"
      onClick="document.getElementById('div_2').style.display='none';
               document.getElementById('div_1').style.display='block'">
  </p>
  <p>
    なんだかんだ。（説明文）
  </p>
  <p>
    <input type="button" value="説明を隠す△" style="width:10em"
      onClick="document.getElementById('div_2').style.display='none';
               document.getElementById('div_1').style.display='block';
               document.location='#div_1'">
  </p>
</div>