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

「閲覧者が表示を折りたためるボックス」ソースのまとめ

これまでのソースをまとめて掲載しておきます。 コピー＆ペーストして使ってみる際にご活用下さい。

■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ソースの解説はこちら

■スタイルシートソース：

<style type="text/css"><!--
div.CollapsibleBox {
   /* ■ボックス全体■ */
   border: 1px solid darkblue; /* 枠線:濃青 */
   font-size: 80%;             /* 文字サイズ:80% */
   width: 390px;               /* 横幅:390px */
}
div.CollapsibleBox div.CollapsibleBoxTitle {
   /* ■タイトル枠■ */
   background-color: darkblue; /* 背景色:濃青 */
   color: white;               /* 文字色:白 */
   margin: 0px;
   padding: 0px;
}
div.CollapsibleBox div.CollapsibleBoxTitle p.cBoxTitle {
   /* ■タイトル文字列■ */
   font-weight: bold;          /* 太字 */
   border: 1px solid darkblue; /* 枠線:濃青 */
   margin: 0px;
   padding: 0px;
}
div.CollapsibleBox div.CollapsibleBoxTitle p.cBoxButtons {
   /* ■ボタン群■ */
   margin: 0px;
   padding: 1px 3px;
   float: right;
   text-align: right;    /* 右寄せ */
}
div.CollapsibleBox div.CollapsibleBoxTitle p.cBoxButtons a img {
   /* ■ボタンそのもの■ */
   border-width: 0px;    /* リンクの枠線を消す */
}
div.CollapsibleBox div.CollapsibleBoxBody {
   /* ■本文枠■ */
   margin: 0px;
   padding: 0px;
   background-color: #eeeeff; /* 背景色:淡青 */
   color: #000055;            /* 文字色:暗青 */
}
div.CollapsibleBox div.CollapsibleBoxBody p {
   /* ■本文■ */
   margin: 0px;
   padding: 0.5em;   /* 内側の余白:0.5文字分 */
}
--></style>

※スタイルシートソースの解説はこちら

■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>

※HTMLソースの解説はこちら。 ただし、JavaScriptを呼び出す部分の解説については、JavaScriptソースの解説ページをご参照下さい。

必要なソースは以上です。

なお、同一ページ内に複数のボックスを配置する場合の注意点を最後にご紹介しておきます。（全ソースを何度も記述する必要はありません。しかし、一部に修正が必要です。）