「閲覧者が展開したり消したりできるボックス」ソースのまとめ
これまでのソースをまとめて掲載しておきます。 コピー＆ペーストして使ってみる際にご活用下さい。
■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ソースの解説 (前回の記事)ページをご参照下さい。
必要なソースは以上です。
同一ページ内に複数のボックスを配置する場合
同一ページ内に複数のボックスを配置する場合は、各ボックスのid属性の値を変化させて下さい。 （同一のid名は、1ページ内に1回だけしか使えません。） 詳しくは、前回の記事の6ページ目「同一ページ内に複数のボックスを配置する場合」をご参照下さい。
おわりに
今回は、標準状態では非表示になっているボックスを、閲覧者が自らの操作で展開したり消したりできるようにする方法をご紹介いたしました。 普段は折り畳まれている「メッセージやメニューの表示用ボックス」として活用してみて下さい。
