クリックで「展開できる」ボックスを作る(3ページ目)

JavaScriptで展開機能を加える

前回の記事では、 ボックスを折り畳んだり消去したりできる関数として、「HideCBox」という関数を作成しました。

今回は「折り畳まれたボックスを展開できる機能」を加えるため、以下のJavaScriptソースを追記し、「ShowCBox」という関数を追加します。

■JavaScriptソース：

<script type="text/javascript"><!--
function ShowCBox( boxid ) {
   var target = document.getElementById(boxid);
   if( target.style.display != "block" ) {
      target.style.display = "block";
   }
   else {
      target.style.display = "";
   }
}
// --></script>

上記のJavaScriptソースでは、ShowCBoxという名称の関数を作成しています。 この関数は、指定されたID（＝引数で渡されたID）のdisplayプロパティを調べ、値が「block」でなければ「block」を指定し、値が「block」であれば元に戻す処理を行っています。
つまり、

• 指定された要素が「標準状態」であれば表示状態(block)にし、
• 指定された要素が表示状態(block)であれば「標準状態」にする

……ということです。
※displayプロパティに値「block」を指定すると、「ブロックレベル要素として表示する」という意味になります。

「」ボタンでは ShowCBox 関数を呼び、
「」ボタンでは HideCBox 関数を呼ぶ。

これで、必要なスタイルシートとJavaScriptの追記は完了です。
あとは、ボックスを作るHTMLを以下のように記述します。

■新HTMLソース：

<div class="CollapsibleBox" id="CBoxCover1">
   <div class="CollapsibleBoxTitle">
      <p class="cBoxButtons">
         <a href="#" onclick="ShowCBox('CBoxBody1');  return false;" title="折りたたみ／復元"><img src="buttoncol.gif" width="18" height="14" alt="折りたたみ／復元"></a>
         <a href="#" onclick="HideCBox('CBoxCover1'); return false;" title="閉じる"><img src="buttonclose.gif" width="18" height="14" alt="閉じる"></a>
      </p>
      <p class="cBoxTitle">ボックスタイトル：</p>
   </div>
   <div class="CollapsibleBoxBody" id="CBoxBody1">
      <p>
         1. ～本文～<br>
         2. ～本文～<br>
         3. ～本文～<br>
      </p>
   </div>
</div>

「」ボタンと 「」ボタンとでは、呼び出している関数が異なる点に注意して下さい。
「本文領域」は標準で非表示状態なので、「」ボタンでは今回作成した ShowCBox 関数を呼び出します。 しかし、「ボックス全体」は標準で表示状態なので、「」ボタンでは前回の記事と同様に HideCBox 関数を呼び出します。

■呼び出すJavaScript関数：

• 折りたたみ・展開ボタン（「」）の方が、
  『 ShowCBox('ボックス本文領域のID名'); 』
• 閉じるボタン（）の方が、
  『 HideCBox('ボックス全体のID名'); 』

完成型

これまでのソースを合わせて表示させると、以下のように見えます。

以上で完成です。

前回の記事で記述したソースも含め、 これまでの全ソースのまとめを次のページに掲載しておきます。コピー＆ペーストして試してみる際にご活用下さい。