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. 「リスト(ul要素)を装飾した際の表示差を解消」
2. 「別窓を開かずに、その場で拡大画像を表示!」
3. 「元のページに戻れないリンクを作る」
以上で完成です。
前回の記事で記述したソースも含め、 これまでの全ソースのまとめを次のページに掲載しておきます。コピー&ペーストして試してみる際にご活用下さい。