トグルで動作するアニメーションつき折りたたみ可能なパネルのコードと実行結果

実装方針

パネル部分をクリックすると、コンテンツの枠を表示する動作を実装します。表示の切り替えは、サブクラスを追加する方式を利用し、サブクラスが指定されていない場合は heightプロパティを0に設定して枠を非表示にする動作にします。

コード

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>

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;
}

解説

クリックした枠に応じて、HeaderClick関数に値が渡されます。値に対応した ContentsPanel[n] の枠の要素を取得します。要素のクラスが設定されていないか、ContentsPanel のみの場合は、Expand サブクラスを付与して枠を表示します。一方で、Expandサブクラスが付与されている場合は、ContentsPanel クラスのみの設定とし、枠を非表示にします。

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";
  }
 
 /* 中略 */

}