FAQに最適！アコーディオンメニューの作り方を解説

FAQページを見やすくするにはアコーディオンメニューがおすすめです。

アコーディオンメニューはユーザーが知りたい情報を素早く確認できる機能です。スマホやタブレットの画面でも見やすくユーザーに優しい設計を実現することができます。

この記事ではアコーディオンメニューを実装する方法を解説します。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

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

アコーディオンメニューとは、クリック時に対応する項目が開く折りたたみ式のメニューです。

FAQの場合は質問項目のみを初期表示し、任意の項目をクリック時に回答項目が表示されるようにします。ユーザーが見たい箇所だけを確認でき、視認性の向上を図れます。特にスペースが限られたデバイスや画面サイズの場合に有用なデザインで、多くの情報を効果的に表示することができます。

FAQをアコーディオンメニューにするメリット

アコーディオンメニューのメリットは以下の二つです。

• 特定の箇所だけを表示できる
• ページ全体をコンパクトにする

FAQで意識すべきはユーザーが情報をすぐ得られるようにすることです。特定の箇所だけ表示できるアコーディオンメニューはFAQに最適です。

またFAQの項目には長い内容が含まれることがあり、すべての項目を表示させるとページ全体が長くなってしまいます。
アコーディオンメニューを導入すれば、すっきりとした見た目と視認性を保ちながら、情報が必要な人にのみ情報を表示させることができます。

FAQをアコーディオンメニューで実装する例

アコーディオンメニューはjQueryで簡単に実装できます。いくつか実装例を紹介します。

toggleClassを使用する実装

デモ

See the Pen toggleClassアコーディオン by ZeroPlus (@zeroplus-programming) on CodePen.

HTML

HTMLは以下の通りです。

<p class="faq-question js-question">質問が入ります。</p>
<p class="faq-answer">回答が入ります。</p>
<p class="faq-question js-question">質問が入ります。</p>
<p class="faq-answer">回答が入ります。</p>
<p class="faq-question js-question">質問が入ります。</p>
<p class="faq-answer">回答が入ります。</p>

CSS

CSSは以下の通りです。

.faq-question {
    border: 1px solid #000;
    background-color: #fff;
    padding: 17px 5%;
    cursor: pointer;
    z-index: 1;
}
.faq-answer {
    height: 0;
    overflow: hidden;
    transition: 0.4s;
    background-color: orange;
    color: #fff;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    padding: 0 3% 0 5%;
}
.js-question.is-active + .faq-answer {
    height: 70px;
}

heghit: 0;とoverflw: hidden;は回答項目を非表示にするためのものです。

js-questionクラスがクリックされたときにis-activeクラスが追加され回答が表示されます。この動きはjQueryで記述します。

「クラス名 + クラス名」の記述は隣接セレクタといい、隣接する要素を指定できます。この場合は「is-activeが付加されたjs-questionに隣接するfaq-answer」を指します。

JavaScript（jQuery）

jQueryは以下の通りです。

$(function () {
    $(".js-question").click(function(){
        $(this).toggleClass("is-active");
        $(".js-question").not(this).removeClass("is-active");
    });
});

jQueryでクリックイベントを作成します。toggleClassメソッドの効果はクラスの付け外しです。js-questionをクリックしたときにis-activeクラスが追加されます。これによりCSSが反映されます。

$(this)は特定の要素のみを取得するjQueryオブジェクトです。この場合はクリックした要素のみを取得します。また.not(this)はその他の要素を取得する記述です。removeClass()と併用しクリック時に別の項目を閉じる動きを実装しています。

クリック時ではなくホバー時に回答を表示したい場合は、.click()を.hover()に変更すれば可能です。

slideToggleを使用する実装

デモ

See the Pen slideToggleアコーディオン by ZeroPlus (@zeroplus-programming) on CodePen.

HTML

HTMLは以下の通りです。

<p class="faq-question">質問が入ります。</p>
<p class="faq-answer">回答が入ります。</p>
<p class="faq-question">質問が入ります。</p>
<p class="faq-answer">回答が入ります。</p>
<p class="faq-question">質問が入ります。</p>
<p class="faq-answer">回答が入ります。</p>

toggleClassでの実装と比較すると、js-question属性が省略されています。

CSS

CSSは以下の通りです。

.faq-question {
    border: 1px solid #000;
    background-color: #fff;
    padding: 17px 5%;
    cursor: pointer;
    z-index: 1;
}
.faq-answer {
    display: none;
    background-color: orange;
    color: #fff;
    margin-bottom: 3px;
    padding: 20px 70px;
}

faq-answerにdisplay: none;を指定し非表示にしています。

CSSの記述量が減ったことにお気づきでしょうか。後述するslideToggleを使用すればスライドの動きを実装できるため、CSSで管理する必要はありません。

JavaScript(jQuery)

jQueryは以下の通りです。

$(function () {
    $(".faq-question").click(function(){
        $(this).next().slideToggle();
    });
});

jQueryでクリックイベントを作成します。.sildeToggle()の記述で項目をスライド表示させます。

.next()は兄弟要素を取得するメソッドです。クリックした要素に隣接する要素を取得できます。今回の場合は質問項目をクリックしたらその回答項目が取得されます。

まとめ

この記事ではアコーディオンメニューの実装方法を解説しました。

アコーディオンメニューはFAQの視認性を向上させる効果があります。ユーザーからの見やすさを意識してアコーディオンメニューを作成してみましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー