可折りたたみコンテンツ/アコーディオンの作成方法

アコーディオン（折り畳み可能なコンテンツ）の作成方法を学びます。

アコーディオンを作成

第1ステップ - HTMLを追加：

<button class="accordion">セクション1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">セクション2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">セクション3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

第2ステップ - CSSを追加：

アコーディオンのスタイルを設定

/* アコーディオンパネルを開閉するボタンのスタイルを設定 */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* ボタンがクリックされた場合（.active クラスを JavaScript で追加）、背景色を追加し、マウスカーソルが上に来た場合（ホバリング） */
.active, .accordion:hover {
  background-color: #ccc;
}
/* アコーディオンパネルにスタイルを追加。注意：デフォルトでは非表示です */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

第3ステップ - JavaScriptを追加：

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* "active" クラスの追加と削除を切り替え、コントロールパネルのボタンの強調表示 */
    this.classList.toggle("active");
    /* 活動パネルの表示と非表示切り替え */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

自分で試してみる

アニメーション手風琴（スライドダウン）

アニメーション手風琴を作成するには、パネルクラスに max-height: 0、overflow: hidden および max-height の属性のトランジション効果。

次に、JavaScript を使用して異なるスクリーンサイズのパネルの高さを計算し、設定します： max-height、コンテンツのスライドダウン効果を実現するため：

<style>
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
</script>

自分で試してみる

アイコンを追加

各ボタンにシンボルを追加して、折り畳み可能なコンテンツが開かれているか閉じているかを示します：

.accordion:after {
  content: "・"; /* 「プラス」（+）の Unicode 文字 */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "・"; /* 「マイナス」（-）の Unicode 文字 */
}

自分で試してみる