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>

 コードコピー機構

この記事のコードコピー機能は次の記述で実現しています。

コピー

<script type="text/javascript" src="http://k-hiura.cocolog-nifty.com/blog/files/hienv.js" charset="UTF-8"></script>
<div class="code-container">
        <button class="copy-button" data-target="code-block-x">コピー</button>
        <pre id="code-block-x" style="font-size: 12px;"><code>
ここにコードを置く。
コード上のHTMLエンティティは&xxx;表現にする必要がある。
例えば<は&lt;とする。
</code></pre></div>
<script type="text/javascript" src="http://k-hiura.cocolog-nifty.com/blog/files/hienv2.js" charset="UTF-8"> /script>

複数置く場合はcode-block-xのxをそれぞれ別にしてください。

前後の<script>は一度だけ記述されていれば構いません。