コード
以下のコードを記述します。
ExpandPanel.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/ecmascript">
function HeaderClick() {
target = document.getElementById("ContentsPanel");
if (target.style.display == "none") {
target.style.display = "block";
} else {
target.style.display = "none";
}
}
</script>
</head>
<body>
<div>パネルの上</div>
<div id="ContentsHeader" style="width:240px;border:1px solid #008d18; background-color:#b6ff00;"
onclick="HeaderClick();">見出し</div>
<div id="ContentsPanel" style="width:240px;border:1px solid #008d18;">
コンテンツ<br />
ABCDEFG<br />
あいうえお<br />
</div>
<div>パネルの下</div>
</body>
</html>
解説
パネルの切り替えは、JavvaScriptでスタイルを変更することで実現します。パネルを表示させる場合はstyle.displayを"block"に非表示にする場合は"none"に設定します。
JavaScript部
function HeaderClick() {
target = document.getElementById("ContentsPanel");
if (target.style.display == "none") {
target.style.display = "block";
} else {
target.style.display = "none";
}
}
ヘッダのdiv枠のクリックにより実行されるJavaScriptです。"ContentsPanel"IDを持つ要素を取得し、styleのdisplayプロパティが"none"であれば要素(div枠)を表示し、それ以外の場合は要素(div枠)を非表示します。style.displayの値を変更して、ｍ表示、非表示の切り替えをします。
HTML
<div id="ContentsHeader" style="width:240px;border:1px solid #008d18; background-color:#b6ff00;"
onclick="HeaderClick();">見出し</div>
<div id="ContentsPanel" style="width:240px;border:1px solid #008d18;">
コンテンツ<br />
ABCDEFG<br />
あいうえお<br />
</div>
HTMLの折りたたみ枠はdiv枠で記述します。見出しの枠にはonclick属性を記述し、クリックされた際にJavaScriptを実行する動作にします。
実行結果
HTMLファイルを表示します。下図の画面が表示されます。
[見出し]のエリアをクリックすると見出しの下のコンテンツ枠が閉じられます。
補足1
<div id="ContentsPanel" style="width:240px;border:1px solid #008d18;display:none;">
コンテンツ<br />
ABCDEFG<br />
あいうえお<br />
</div>
コンテンツのDiv枠のスタイルに"display:none;"を指定するとページ読み込み時にパネルが閉じた状態になります。
補足2
CSSの隣接セレクタとチェックボックスを利用すると、JavaScriptを記述せずにアコーディオンパネルが実装できます。CSSのみでアコーディオンパネルを作成する手順については「
折りたたみ可能なパネルの作成 - CSSのみを利用した折りたたみ領域 / アコーディオンパネル (CSS Tips)」の記事を参照してください。
このページのキーワード
- JSによる折りたたみ可能なパネルの作成 - JSによるアコーディオンパネルの作成
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2017-10-04
作成日: 2013-06-24
