JavaScriptで実装する!FAQアコーディオンメニューの作り方

date_range 2025/07/01
GUARDIAN Creative BLOG
FAQアコーディオンメニューの作り方

Web制作においてよく使われるUIのひとつが「アコーディオンメニュー」です。
これは、ユーザーがクリックすると内容が開閉するインタラクティブな仕組みで、FAQ(よくある質問)ページやQ&Aセクションなどで多く見かけます。
ページの情報量が多いときでも、スッキリと見せることができる便利なデザインです。

本記事では、JavaScriptを使って、シンプルかつ使いやすいFAQアコーディオンメニューを一から実装する方法をご紹介します。
HTMLとCSSを組み合わせて、初心者でも理解しやすいコード例を交えながら解説していきますので、Web制作の練習にもぴったりです。
まずは、全体の流れを把握していきましょう。

アコーディオンメニューとは?

アコーディオンメニューとは、クリックやタップといったユーザーの操作によって、情報の表示・非表示を切り替えるUI(ユーザーインターフェース)のことです。
折りたたみ式の動作から「アコーディオン」という名前がついており、ページ内の情報を省スペースで整理するのに最適な手法です。
FAQ(よくある質問)ページやグローバルメニュー、長文記事の目次など、さまざまな場面で活用されています。
最初は必要最小限の情報だけを表示し、必要に応じて内容を開けることで、ユーザーにとっても見やすく、快適な閲覧体験が得られます。
このようなアコーディオン機能は、JavaScriptを使えば簡単に実装できます。
CSSだけでは難しい「アニメーションの微調整」や「開閉状態の保持」なども、JavaScriptを活用すれば柔軟かつ自由にコントロール可能です。
Web制作において、覚えておくと役立つ機能のひとつといえるでしょう。
基本のHTML構造を用意しよう
アコーディオンメニューをJavaScriptで実装するには、まず土台となるHTML構造をしっかりと用意することが重要です。
今回はFAQ形式のアコーディオンを例に、シンプルで汎用性の高いマークアップを紹介します。
以下のように、ひとつの質問と回答を1セットとして構造化します。


html


<div class="faq">


 <div class="faq-item">


   <button class="faq-question">Q. サービスの利用方法は?</button>


   <div class="faq-answer">A. ご登録後、マイページから利用できます。</div>

 </div>

 <!-- 繰り返し -->

</div>





ここでは、buttonタグを使って質問を囲んでおり、キーボード操作やアクセシビリティにも配慮した形になっています。
また、faq-itemで1セットをグルーピングしておくことで、JavaScriptからの操作も簡単になります。
このように、意味のあるクラス名を付けながらHTMLを設計することで、後からCSSやJavaScriptによる制御がしやすくなります。
Web制作では、見た目だけでなく構造の整理も非常に大切です。
次のステップでは、これらの要素にスタイルを適用して、アコーディオンUIらしい見た目に整えていきましょう。
CSSで見た目を整える HTMLの構造が完成したら、次はCSSを使ってアコーディオンメニューの見た目を整えていきましょう。
スタイルを加えることで、視認性が向上し、ユーザーにとって使いやすいUIになります。
ここでは、最小限のCSSでアコーディオンらしい挙動を実現する方法を紹介します。
まずは、質問と回答のスタイルを以下のように設定します。


css
.faq-question {
 width: 100%;
 text-align: left;
 padding: 1em;
 font-weight: bold;
 cursor: pointer;
 border: none;
 background-color: #f2f2f2;
}
.faq-answer {
 max-height: 0;
 overflow: hidden;
 padding: 0 1em;
 background-color: #fff;
 transition: max-height 0.3s ease;
}


ここでのポイントは、.faq-answerに対して max-height: 0 と overflow: hidden を指定することで、初期状態では非表示にしておくことです。
開閉アニメーションをなめらかにするために transition を活用しています。
続いて、JavaScript側で開いたときに open クラスを付けた場合のスタイルも設定しておきます。


css
.faq-item.open .faq-answer {
 max-height: 300px; /* 回答の内容に応じて調整可能 */
}


このようにしておくことで、ボタンをクリックして .open クラスが付与されたときに、回答部分がスムーズに展開される仕組みになります。
固定の max-height ではなく動的に調整したい場合は、後述するJavaScriptでの制御が必要です。
CSSで整えることで、Web制作の見た目のクオリティが大きく向上します。
JavaScriptによる動きとの組み合わせで、使いやすいアコーディオンUIを実現しましょう。
JavaScriptで開閉の動きを実装
HTMLとCSSで基礎を整えたら、いよいよJavaScriptを使ってアコーディオンメニューの開閉動作を実装していきます。
ボタンをクリックしたときに、該当する回答部分を開閉するシンプルな仕組みを構築しましょう。
まずは、すべての質問ボタンを取得し、それぞれにクリックイベントを設定します。
以下は基本的なコード例です。     

javascript
const questions = document.querySelectorAll('.faq-question');
questions.forEach((question) => {
question.addEventListener('click', () => {
const item = question.parentElement;
item.classList.toggle('open');
});
});


このコードでは、すべての`.faq-question`要素をループで処理し、クリックされた際に親要素の`.faq-item`に対して`open`クラスをトグル(付け外し)しています。
これによって、CSSで定義した`.open .faq-answer`のスタイルが適用され、回答が表示される仕組みです。
一つだけ開くようにしたい場合
すべての質問を同時に開けるのではなく、「常に一つだけ開く」ようにしたい場合は、以下のように実装を少し工夫します。

javascript
questions.forEach((question) => {
question.addEventListener('click', () => {
const item = question.parentElement;
document.querySelectorAll('.faq-item').forEach((el) => {
if (el !== item) {
el.classList.remove('open');
}
});
item.classList.toggle('open');
});
});


このコードでは、クリックされた要素以外の`.faq-item`から`open`クラスを削除することで、開いているパネルを一つに制限しています。


本記事では、HTMLとCSSで基本の構造とデザインを整え、JavaScriptを使ってクリック時の開閉動作を実装する方法をご紹介しました。
アコーディオンメニューは、FAQやQ&Aページなどでよく使われる便利なUIです。
CSSだけでは難しいアニメーションや動的な制御も、JavaScriptを活用すれば簡単に対応できます。
シンプルな仕組みながら、ユーザーの使いやすさを大きく左右する要素なので、Web制作の基本テクニックとしてぜひ身につけておきましょう。
今後は応用として、アニメーションの高度化や状態管理にもチャレンジしてみてください。