アコーディオン（開閉リスト）は、Webページ上で情報をコンパクトに整理し、必要に応じて展開・折りたたむことができる便利なUIパーツです。FAQやメニュー、詳細説明など、さまざまな場面で活用されています。本記事では、HTMLとCSS、JavaScriptを使ってアコーディオンを実装する方法を丁寧に解説します。初心者の方でも理解しやすいよう、コード付きで解説していますので、ぜひご活用ください。
まずは、アコーディオンの土台となる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を追加しましょう。ポイントは、開閉部分（コンテンツ）の表示・非表示を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で制御する方法です。以下のコードでは、クリックした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";
}
});
});
});
このコードでは、クリックされた項目だけが開閉され、他の項目には影響を与えません。
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制作に取り入れてみてください。