CSSとJavaScriptで作る！アコーディオン（開閉リスト）の実装方法を丁寧に解説

アコーディオン（開閉リスト）は、Webページ上で情報をコンパクトに整理し、必要に応じて展開・折りたたむことができる便利なUIパーツです。FAQやメニュー、詳細説明など、さまざまな場面で活用されています。本記事では、HTMLとCSS、JavaScriptを使ってアコーディオンを実装する方法を丁寧に解説します。初心者の方でも理解しやすいよう、コード付きで解説していますので、ぜひご活用ください。

HTMLでアコーディオンの基本構造を作る

まずは、アコーディオンの土台となるHTML構造を作成します。以下は最もシンプルな例です。

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">見出し1</button>
    <div class="accordion-content">
      <p>ここに1番目の詳細コンテンツが入ります。</p>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-header">見出し2</button>
    <div class="accordion-content">
      <p>ここに2番目の詳細コンテンツが入ります。</p>
    </div>
  </div>
</div>

このように、accordion-itemで1セット（見出し＋コンテンツ）を構成します。buttonをクリックすることで、対応するaccordion-contentを開閉します。

CSSでスタイルと開閉効果をつける

次に、アコーディオンの見た目を整えるCSSを追加しましょう。ポイントは、開閉部分（コンテンツ）の表示・非表示をmax-heightやoverflowで制御することです。

.accordion {
  max-width: 600px;
  margin: 0 auto;
}

.accordion-header {
  width: 100%;
  text-align: left;
  padding: 15px;
  font-size: 16px;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
  outline: none;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fafafa;
  padding: 0 15px;
}

.accordion-content p {
  margin: 15px 0;
}

max-height: 0で初期状態は非表示にし、クリック時に値を変更してスライドさせるように見せます。アニメーションはtransitionで実現します。

JavaScriptでクリックイベントを制御する

続いて、アコーディオンの開閉をJavaScriptで制御する方法です。以下のコードでは、クリックしたaccordion-headerに対応するaccordion-contentを開閉します。

document.addEventListener("DOMContentLoaded", function () {
  const headers = document.querySelectorAll(".accordion-header");

  headers.forEach(header => {
    header.addEventListener("click", function () {
      const content = this.nextElementSibling;
      const isOpen = content.style.maxHeight && content.style.maxHeight !== "0px";

      document.querySelectorAll(".accordion-content").forEach(c => {
        c.style.maxHeight = null;
      });

      if (!isOpen) {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  });
});

このコードでは、すでに開いている他のアコーディオンを閉じてから、クリックされた項目のみを展開します。scrollHeightを使用して、要素の内容に合わせて高さを自動調整しています。

複数開けるバージョンに変更するには？

上記のコードは1つしか開かない「単一開閉型」ですが、すべてのセクションを個別に開閉可能にしたい場合は、以下のように変更できます。

document.addEventListener("DOMContentLoaded", function () {
  const headers = document.querySelectorAll(".accordion-header");

  headers.forEach(header => {
    header.addEventListener("click", function () {
      const content = this.nextElementSibling;
      const isOpen = content.style.maxHeight && content.style.maxHeight !== "0px";

      if (isOpen) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  });
});

このコードでは、クリックされた項目だけが開閉され、他の項目には影響を与えません。

よりモダンな実装：details要素を使う方法

HTML5には、開閉機能を標準で備えた<details>と<summary>という要素があります。これを使えばJavaScript不要でアコーディオンを実現可能です。

<details>
  <summary>質問1：アコーディオンとは？</summary>
  <p>アコーディオンは、クリックで表示・非表示を切り替えるUIコンポーネントです。</p>
</details>
<details>
  <summary>質問2：どう使うの？</summary>
  <p>FAQやメニューなど、情報をすっきりまとめたい場面で便利です。</p>
</details>

CSSで以下のようにスタイルを整えれば、自然な開閉表示になります。

details summary {
  cursor: pointer;
  padding: 10px;
  background-color: #e0e0e0;
  font-weight: bold;
}

details[open] summary {
  background-color: #ccc;
}

details p {
  padding: 10px;
  margin: 0;
  background-color: #f9f9f9;
}

この方法はシンプルですが、アニメーションを加えるのは少し難しいため、JavaScriptで制御する方法と使い分けましょう。

よくあるエラーとトラブル対処法

開閉がうまくいかないときは？

  • max-heightの設定ミスやoverflowの指定忘れが原因です。
  • scrollHeightを使っていない場合、開いたときの高さが設定されず見えません。

全体が一気に開く・閉じる？

  • 同時に開けない設定で、他の要素もmax-height = nullにしている可能性があります。
  • デバッグの際はconsole.log()で要素を確認しましょう。

まとめ

アコーディオンは見た目の整理だけでなく、ユーザー体験の向上にもつながる便利なUIです。HTMLとCSS、JavaScriptを組み合わせれば、自分好みのアコーディオンを自由にカスタマイズできます。さらに、HTML5のdetailsタグを使うことで、よりシンプルな実装も可能です。ぜひ今回の内容を参考に、実際のWeb制作に取り入れてみてください。

タイトルとURLをコピーしました