アコーディオンメニュー完全ガイド：シンプルな実装から応用テクニックまで

Posted on by

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

アコーディオンメニューとは、クリックやタップなどのユーザー操作に応じて、
コンテンツが展開・縮小されるインターフェース要素のことです。
多くのウェブサイトやアプリケーションで、
FAQ（よくある質問）セクションやサイドメニューに使用されており、
コンテンツをコンパクトにまとめることで、ユーザーにとって情報を見つけやすくする効果があります。

本記事では、アコーディオンメニューを実装するための複数のサンプルコードを提供し、
それぞれのコードがどのように動作するのかを詳しく説明します。
また、応用例として、アイコンの変化やアニメーションの追加など、
ユーザーエクスペリエンスを向上させるための工夫についても解説します。

シンプルなアコーディオンメニューの実装

まずは、最も基本的なアコーディオンメニューの実装から始めましょう。
以下のコードは、HTMLとCSSだけでシンプルなアコーディオンメニューを実現する例です。

HTML

<div class="accordion">
    <div class="accordion-item">
        <h3 class="accordion-title">質問1</h3>
        <div class="accordion-content">
            <p>回答1の内容がここに入ります。</p>
        </div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-title">質問2</h3>
        <div class="accordion-content">
            <p>回答2の内容がここに入ります。</p>
        </div>
    </div>
</div>

CSS

.accordion-content {
    display: none;
}

.accordion-title {
    cursor: pointer;
    padding: 10px;
    background-color: #eee;
    border: 1px solid #ddd;
}

.accordion-item.active .accordion-content {
    display: block;
}

このコードでは、各「質問」のタイトルがクリックされると、
その下に対応する「回答」のコンテンツが表示されるようになっています。
CSSでdisplay: none;を設定することで、デフォルトではコンテンツが非表示になり、
display: block;が適用されるとコンテンツが表示されます。

JavaScript

JavaScriptを使って、ユーザーが質問タイトルをクリックしたときに、
対応する回答を表示・非表示にする処理を追加します。

document.addEventListener('DOMContentLoaded', function() {
    var accordionItems = document.querySelectorAll('.accordion-item');

    accordionItems.forEach(function(item) {
        var title = item.querySelector('.accordion-title');
        title.addEventListener('click', function() {
            item.classList.toggle('active');
        });
    });
});

アコーディオンメニューにアニメーションを追加

次に、アコーディオンメニューにアニメーションを追加して、
コンテンツがスムーズに展開・縮小するようにします。
以下のコードは、max-heightとtransitionプロパティを使ってアニメーションを実現しています。

HTML

HTMLは先ほどのシンプルな例と同じです。

CSS

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding: 0 10px;
}

.accordion-title {
    cursor: pointer;
    padding: 10px;
    background-color: #eee;
    border: 1px solid #ddd;
}

.accordion-item.active .accordion-content {
    max-height: 200px; /* コンテンツの最大高さを設定 */
    padding: 10px 10px;
}

このコードでは、max-heightを0に設定することでコンテンツを初期状態で非表示にし、
max-heightが変わる際にアニメーションを適用しています。
max-heightの値は、表示するコンテンツの量に応じて調整してください。

JavaScript

JavaScriptの部分は前述のシンプルなアコーディオンメニューのコードと同じです。

プラスとマイナスのアイコンを追加するアコーディオンメニュー

次に、アコーディオンメニューにプラスとマイナスのアイコンを追加して、
メニューの開閉状態を視覚的に分かりやすくする方法を紹介します。

HTML

<div class="accordion">
    <div class="accordion-item">
        <h3 class="accordion-title">質問1 <span class="toggle-icon">+</span></h3>
        <div class="accordion-content">
            <p>回答1の内容がここに入ります。</p>
        </div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-title">質問2 <span class="toggle-icon">+</span></h3>
        <div class="accordion-content">
            <p>回答2の内容がここに入ります。</p>
        </div>
    </div>
</div>

CSS

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding: 0 10px;
}

.accordion-title {
    cursor: pointer;
    padding: 10px;
    background-color: #eee;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-icon {
    font-size: 1.5em;
    transition: transform 0.3s ease;
}

.accordion-item.active .toggle-icon {
    transform: rotate(45deg);
}

.accordion-item.active .accordion-content {
    max-height: 200px;
    padding: 10px 10px;
}

このコードでは、toggle-iconクラスを利用して、
アイコンがプラスからマイナスに変化するアニメーションを追加しています。
アイコンは、transform: rotate(45deg);を使って、回転することで視覚的に変化させています。

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var accordionItems = document.querySelectorAll('.accordion-item');

    accordionItems.forEach(function(item) {
        var title = item.querySelector('.accordion-title');
        var icon = item.querySelector('.toggle-icon');

        title.addEventListener('click', function() {
            item.classList.toggle('active');
            if (item.classList.contains('active')) {
                icon.textContent = "−";
            } else {
                icon.textContent = "+";
            }
        });
    });
});

応用例: 多層アコーディオンメニュー

最後に、アコーディオンメニューを応用して、
ネストされたアコーディオンメニューを実装する方法を紹介します。
これにより、さらに複雑な情報構造を簡潔にまとめることができます。

HTML

<div class="accordion">
    <div class="accordion-item">
        <h3 class="accordion-title">質問1 <span class="toggle-icon">+</span></h3>
        <div class="accordion-content">
            <p>回答1の内容がここに入ります。</p>
            <div class="accordion">
                <div class="accordion-item">
                    <h4 class="accordion-title">サブ質問1-1 <span class="toggle-icon">+</span></h4>
                    <div class="accordion-content">
                        <p>サブ回答1-1の内容がここに入ります。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSSとJavaScript

CSSとJavaScriptのコードは基本的に先述の例と同じです。
ネストされたアコーディオンに対しても、同じスタイルとスクリプトが適用されます。

まとめ

アコーディオンメニューは、情報を整理し、
ユーザーが必要な情報を簡単に見つけられるようにするための強力なツールです。
本記事では、シンプルなアコーディオンメニューの実装から、アイコンの追加、
アニメーションの適用、さらにネストされたアコーディオンメニューの応用まで、
さまざまな実装方法を紹介しました。これらのサンプルコードを元に、
あなたのウェブサイトやアプリケーションでアコーディオンメニューを効果的に活用してみてください。