JavaScriptでアコーディオンパネルを作る
パターン1の処理概要
最初から開いているパネルは1つのみです。他のパネルを選択すると開いているパネルは閉じて、選択したパネルが開きます。開いているパネルを再度選択しても開いているままで閉じません。
パターン1のプログラム
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>アコーディオンパネル(ノーマル)</title>
<style type="text/css">
html,body,dl,dt,dd,p {
margin:0;
padding:0;
line-height: 1.5;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}
dl{
width:400px;
margin:50px auto;
}
dt {
padding: 15px;
background:#7CADB6;
font-weight: bold;
color: #FFF;
cursor:pointer;
}
dd {
padding: 20px;
border:1px solid #7CADB6;
border-top: 1px solid #FFF;
height:200px;
line-height: 1.5;
}
</style>
<script>
window.onload = function() {
var section1 = document.getElementById('sectionA');
var section2 = document.getElementById('sectionB');
var section3 = document.getElementById('sectionC');
section1.style.display = 'block';
section2.style.display = 'none';
section3.style.display = 'none';
var title1 = document.getElementById('categA');
var title2 = document.getElementById('categB');
var title3 = document.getElementById('categC');
title1.onclick = function() {
section1.style.display = 'block';
section2.style.display = 'none';
section3.style.display = 'none';
};
title2.onclick = function() {
section1.style.display = 'none';
section2.style.display = 'block';
section3.style.display = 'none';
};
title3.onclick = function() {
section1.style.display = 'none';
section2.style.display = 'none';
section3.style.display = 'block';
};
}
</script>
</head>
<body>
<div id="container">
<dl>
<dt id="categA">カテゴリA</dt>
<dd id="sectionA">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
<dt id="categB">カテゴリB</dt>
<dd id="sectionB">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
<dt id="categC">カテゴリC</dt>
<dd id="sectionC">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
</div>
</body>
</html>
パターン1の処理結果
パターン2の処理概要
最初はすべてのパネルが閉じています。パネルを選択すると選択されたパネルが開きます。他のパネルを選択すると開いているパネルは開いたままで、あらたに選択されたパネルが開きます。開いているパネルを再度選択するとパネルは閉じます。このことは任意のパネルの開閉を選択できるということです。
パターン2のプログラム
<script>
window.onload = function() {
var flag1 = 0,flag2 = 0, flag3= 0;
var section1 = document.getElementById('sectionA');
var section2 = document.getElementById('sectionB');
var section3 = document.getElementById('sectionC');
section1.style.display = 'none';
section2.style.display = 'none';
section3.style.display = 'none';
var title1 = document.getElementById('categA');
var title2 = document.getElementById('categB');
var title3 = document.getElementById('categC');
title1.onclick = function() {
if( flag1 === 0 ) {
section1.style.display = 'block';
flag1 = 1;
console.log(flag1,flag2,flag3);
} else {
section1.style.display = 'none';
flag1 = 0;
console.log(flag1,flag2,flag3);
}
};
title2.onclick = function() {
if( flag2 === 0 ) {
section2.style.display = 'block';
flag2 = 1;
console.log(flag1,flag2,flag3);
} else {
section2.style.display = 'none';
flag2 = 0;
console.log(flag1,flag2,flag3);
}
};
title3.onclick = function() {
if( flag3 === 0 ) {
section3.style.display = 'block';
flag3 = 1;
console.log(flag1,flag2,flag3);
} else {
section3.style.display = 'none';
flag3 = 0;
console.log(flag1,flag2,flag3);
}
};
}
</script>
パターン2の処理結果
