ホームページ作成/表示・非表示の切替 (HTML,CSS,JavaScript)

クリックで「展開できる」ボックスを作る(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名'); 』

完成型

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

以上で完成です。

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

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます