クリックで「折りたためる」ボックスを作る(4ページ目)

折りたたみ・消去機能を加える

JavaScriptを使って、ボックスを折りたたんだり展開したり、消去したりできる機能を加えます。 まずは、以下のJavaScriptソースを記述します。

■JavaScriptソース：

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

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

• 指定された要素が表示されていれば非表示にし、
• 指定された要素が非表示であれば表示する

……ということです。

次に、先ほど記述したHTMLソースに対して、以下のように追記します。 目的は、JavaScriptからスタイルを変更できるようにすることと、ボタンクリックによって（先ほど作成した）関数を呼び出せるようにするためです。

■新HTMLソース：

<div class="CollapsibleBox" id="CBoxCover1">
   <div class="CollapsibleBoxTitle">
      <p class="cBoxButtons">
         <a href="#" onclick="HideCBox('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>

ボックス全体を作っているdiv要素に対して、id属性を使ってID名「CBoxCover1」を付加しています。
また、ボックス本文を作っているdiv要素に対しては、ID名「CBoxBody1」を付加しています。
これらのID名を使って、先ほどのJavaScriptから表示・非表示を切り替えます。それによって「折りたたみ」や「消去」が実現できます。

タイトル部分にあるボタン「」や 「」は、a要素の中に入れ、リンクにしています。 リンクと言っても実際にはどこにも移動せず、ただonclick属性を用いて「クリックした際にJavaScriptが呼び出される」ようにしただけです。
※このonclick属性の値には、最後に「return false;」の記述があります。これは必須です。これがないと、リンクとしての機能も実行されてしまうため、場合によっては画面が最上部までスクロールしてしまいます。「return false;」の記述は省略しないで下さい。

呼び出すJavaScriptは、

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

……となっています。
これによって、「折りたたみ・展開」ボタン（「」）では、ボックス本文の表示・非表示が切り替わり、 「閉じる」ボタン（）では、ボックス全体が非表示になります。
※ボックス全体が非表示になると、ボタン群も非表示になるため、再度表示させることはできません。（※ページを再読込すれば、また表示されます。）

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

以上で完成です。

これまでの全ソースのまとめを次のページに掲載しておきます。コピー＆ペーストして試してみる際にご活用下さい。
また、1ページ内に複数のボックスを配置したい場合の注意点についても解説しています。