読者です 読者をやめる 読者になる 読者になる

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 Pゴシック", "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の処理結果

f:id:develog:20160918142519p:plain

f:id:develog:20160918142524p:plain

f:id:develog:20160918142530p:plain

パターン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の処理結果 

f:id:develog:20160918142543p:plain

f:id:develog:20160918142548p:plain