初心者でも簡単に実装できる、シンプルで便利なアコーディオンメニューの作り方をご紹介します。アコーディオンは、クリックやタップすることでコンテンツが開いたり閉じたりするUIコンポーネントです。サイトのFAQページやプロフィールページに使うことが多いですね。
まずはHTMLを整えよう
最初に行うのは、アコーディオンの基本的な構造をHTMLで作ることです。シンプルな例を以下に示します。
<div class="accordion">
<button class="accordion-button">セクション1</button>
<div class="accordion-content">
<p>ここにセクション1の内容が入ります。</p>
</div>
<button class="accordion-button">セクション2</button>
<div class="accordion-content">
<p>ここにセクション2の内容が入ります。</p>
</div>
<!-- これを繰り返して、必要な数のセクションを作成できます -->
</div>- .accordion は、全体を囲むコンテナとして機能します。
- .accordion-button はクリックで開閉するトリガーとなるボタンです。
- .accordion-content は、開閉する内容部分を表します。
スタイリッシュなデザインをCSSで実装しよう
次に、アコーディオンの見た目を整えるCSSを書きます。初期状態では内容が非表示になっていて、ボタンをクリックしたときに開き、再度クリックで閉じるように設定します。
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-button {
cursor: pointer;
}
.accordion-button.active {
background-color: #eee;
}- max-height: 0; と overflow: hidden; で、初期状態では内容が非表示になります。
- transition: max-height 0.2s ease-out; で、開閉時のアニメーションを滑らかにします。
- cursor: pointer; で、ボタンの上にマウスカーソルが来たときに、ポインターに変わるようにします。
- .active クラスが追加されたときのスタイルを定義しています。この例では背景色が変わります。
JavaScriptでインタラクションを生み出そう
最後に、JavaScriptを使って、ボタンをクリックしたときにアコーディオンが開閉する機能を実装します。
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.accordion-button');
buttons.forEach(function(button) {
button.addEventListener('click', function() {
this.classList.toggle('active');
const content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
});
});
});- document.querySelectorAll(‘.accordion-button’) で、クラス名が ‘accordion-button’ の要素をすべて取得します。
- button.addEventListener(‘click’, function() {…} で、各ボタンにクリックイベントを追加します。
- this.classList.toggle(‘active’) で、クリックされたボタンに ‘active’ クラスをトグル（あれば削除、なければ追加）します。
- const content = this.nextElementSibling で、クリックされたボタンに隣接する要素（ここではアコーディオンの内容）を取得します。
- if (content.style.maxHeight) {…} で、内容を開くか閉じるかの条件分岐を行います。
まとめ
これでシンプルなアコーディオンが完成しました！HTMLで基本的な構造を作り、CSSでデザインを整え、最後にJavaScriptで動きをつける、という流れを覚えれば、他のインタラクティブなコンポーネントも同じように作成できますよ。
シンプルでわかりやすい例を心がけましたが、この基本的な構造を元に、さらに複雑なアコーディオンも作ることができます。例えば、一度に一つのセクションしか開けないようにする、アコーディオンの中にさらにアコーディオンを作る（ネスト）、などの応用も可能です。
