複数のパネルの折りたたみ動作がトグルで動作するパネルのコードを紹介します。
コード
CssExpandPanel.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(index) {
target = document.getElementById("ContentsPanel" + index);
if (target.className == null || target.className == "" || target.className=="ContentsPanel") {
target.className = "ContentsPanel Expand";
} else {
target.className = "ContentsPanel";
}
target1 = document.getElementById("ContentsPanel1");
target2 = document.getElementById("ContentsPanel2");
target3 = document.getElementById("ContentsPanel3");
target4 = document.getElementById("ContentsPanel4");
target5 = document.getElementById("ContentsPanel5");
switch (index) {
case 1:
target2.className = "ContentsPanel";
target3.className = "ContentsPanel";
target4.className = "ContentsPanel";
target5.className = "ContentsPanel";
break;
case 2:
target1.className = "ContentsPanel";
target3.className = "ContentsPanel";
target4.className = "ContentsPanel";
target5.className = "ContentsPanel";
break;
case 3:
target1.className = "ContentsPanel";
target2.className = "ContentsPanel";
target4.className = "ContentsPanel";
target5.className = "ContentsPanel";
break;
case 4:
target1.className = "ContentsPanel";
target2.className = "ContentsPanel";
target3.className = "ContentsPanel";
target5.className = "ContentsPanel";
break;
case 5:
target1.className = "ContentsPanel";
target2.className = "ContentsPanel";
target3.className = "ContentsPanel";
target4.className = "ContentsPanel";
break;
}
}
</script>
<link rel="stylesheet" type="text/css" href="CssExpandPanel.css" />
</head>
<body>
<div id="ContentsHeader1" class="ContentsHeader" onclick="HeaderClick(1);">メニュー1</div>
<div id="ContentsPanel1" class="ContentsPanel">
コンテンツ<br />
ABCDEFG<br />
あいうえお<br />
</div>
<div id="ContentsHeader2" class="ContentsHeader" onclick="HeaderClick(2);">メニュー2</div>
<div id="ContentsPanel2" class="ContentsPanel">
コンテンツ<br />
ABCDEFG<br />
あいうえお<br />
</div>
<div id="ContentsHeader3" class="ContentsHeader" onclick="HeaderClick(3);">メニュー3</div>
<div id="ContentsPanel3" class="ContentsPanel">
コンテンツ<br />
ABCDEFG<br />
あいうえお<br />
</div>
<div id="ContentsHeader4" class="ContentsHeader" onclick="HeaderClick(4);">メニュー4</div>
<div id="ContentsPanel4" class="ContentsPanel">
コンテンツ<br />
ABCDEFG<br />
あいうえお<br />
</div>
<div id="ContentsHeader5" class="ContentsHeader" onclick="HeaderClick(5);">メニュー5</div>
<div id="ContentsPanel5" class="ContentsPanel">
コンテンツ<br />
ABCDEFG<br />
あいうえお<br />
</div>
</body>
</html>
解説
JavaScript部
target = document.getElementById("ContentsPanel" + index);
if (target.className == null || target.className == "" || target.className=="ContentsPanel") {
target.className = "ContentsPanel Expand";
} else {
target.className = "ContentsPanel";
}
CssExpandPanel.css
.ContentsHeader {
width:360px;
border: solid 1px #ff6a00;
text-align:center;
background-color:#ffd800;
}
.ContentsPanel {
width:360px;
height:0px;
border: solid 1px #ff6a00;
overflow:hidden;
transition: height 0.2s ease-in;
}
.ContentsPanel.Expand {
width:360px;
height:120px;
border: solid 1px #ff6a00;
overflow:hidden;
}
実行結果
HTMLファイルを表示します。下図の画面が表示されます。
[メニュー1]の見出しをクリックします。コンテンツのパネルが開きます。
[メニュー2]の見出しをクリックします。メニュー2のパネルが開きます。同時にメニュー1のパネルは閉じられます。~
[メニュー4]の見出しをクリックしました。開くコンテンツのパネルは常に1つです。
開いているパネルの見出しをクリックするとパネルが閉じます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2017-09-07
作成日: 2013-06-21