4/4 クリックで「展開できる」ボックスを作る [ホームページ作成] All About

「閲覧者が展開したり消したりできるボックス」ソースのまとめ

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

■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 = "";
   }
}
function HideCBox( boxid ) {
   var target = document.getElementById(boxid);
   if( target.style.display != "none" ) {
      target.style.display = "none";
   }
   else {
      target.style.display = "";
   }
}
// --></script>

※JavaScriptソース「ShowCBox」の解説はこちら
※JavaScriptソース「HideCBox」の解説はこちら (前回の記事)

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

<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;            /* 文字色:暗青 */
   display: none;  /* 標準で非表示状態に */
}
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="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>

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

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