【jQuery】FAQで使うシンプルなアコーディオン サンプルコード

アコーディオンメニューとは、ウェブサイトやアプリでよく見かける便利なものです。
複数の部分が折りたたまれていてユーザーがクリックすると開くようになっているもので、きっと皆さんも一度は見たことがあるかと思います。1つクリックをすると対応する項目だけが開くのでスペースを節約できて、情報も整理しやすくなります。

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

アコーディオンメニューは、ウェブサイトやアプリでよく見られる便利な機能です。これは、たくさんの情報をコンパクトに整理し、見やすくするために使われます。例えば、よくある質問（FAQ）のページでは、たくさんの質問とその答えがあるかもしれませんが、アコーディオンメニューを使うと、一度に表示される質問が少なくなります。ユーザーは気になる質問をクリックするだけで、その答えを見ることができます。

また、アコーディオンメニューは、ウェブサイトやアプリのデザインを美しく保つのにも役立ちます。たくさんの情報を一度に表示すると画面がごちゃごちゃして見づらくなることがありますが、アコーディオンメニューを使うと、必要な情報だけが見えるようになります。これにより、利用者ははストレスなく情報を見つけることができます。

どういう時に使うといい？

• FAQページ：複数の質問とその回答をコンパクトに表示するのに便利です。
• メニュー：異なる項目を整理して、ユーザーが必要な情報に素早くアクセスできるようにします。
• コンテンツ表示：大量のコンテンツを階層的に表示する場合に有用です。

今回は、よくある質問（FAQ）で使えるアコーディオンについて、詳しく説明していきます。

jQueryでFAQアコーディオンを作成する

早速ですが、こちらがFAQアコーディオンのデモです。

今回はjQueryを使用するので、ご自身のサイトで試す際はjQuery本体を読み込んでから使用してください。

See the Pen
すべて最初は閉じてあり、クリックで開くアコーディオン by GROWORKS (@groworks)
on CodePen.

「アコーディオン見出し」という白いエリアをクリックすると「アコーディオンコンテンツ」という文章が表示されますね。
.accordion-headerには「Q」、.accordion-content「A」と書くと決まっていて、特にSEO上の観点から必要な文でもないので擬似要素でつけています。

解説

HTML

<div class="accordion">
    <div class="accordion-header"><span>アコーディオン見出し</span></div>
    <div class="accordion-content"><span>アコーディオンコンテンツ</span></div>
    <div class="accordion-header"><span>アコーディオン見出し</span></div>
    <div class="accordion-content"><span>アコーディオンコンテンツ</span></div>
    <div class="accordion-header"><span>アコーディオン見出し</span></div>
    <div class="accordion-content"><span>アコーディオンコンテンツ</span></div>
    <!-- 追加の質問と回答を必要に応じて追加 -->
</div>

HTMLですので慣れた見た目でしょうか。今回は.accordion-headerと.accordion-contentが順番に繰り返されていることが大事なので、一組ずつdivで囲んでも大丈夫です。
自分がCSSを作りやすい構造にしてください。

CSS

今回必須なのは下記CSSのみです。

/* 必須 */
.accordion-content {
    display: none;
}

これを忘れると、普通に隠したいはずのコンテンツが表示されていて、見出しをクリックすると閉じるという形になってしまいます。
その他のCSSは装飾用なので、必要に応じてご自身のウェブサイトに組み込んでください。

jQuery

コメントアウトでご説明します。

$('.accordion-header').click(function() { // .accordion-headerをクリックで発火
    $(this).next().slideToggle();
    // $(this)...$('.accordion-header')の.next()...次の要素が.slideToggle()...表示と非表示を交互にする
    $(this).toggleClass('active');
    // $(this)...$('.accordion-header')に、activeというクラスが追加と削除を交互にする
});

これだけでFAQのアコーディオンが作成できます。

jQueryで作るFAQアコーディオン（最初の一つだけ開いている）

クライアントの要望によっては「クリックすると内容が見られるとわかるように最初の一つは開いておいてほしい」という場合があります。
その場合は下記コードを使用します。

See the Pen
クリックで開くシンプルなアコーディオン by GROWORKS (@groworks)
on CodePen.

今回は:nth-childで要素を指定しているため、全体を一つのdivで囲んだHTMLのままのほうが簡単でしょう。
増えた部分のみコメントアウトで解説いたします。

解説

jQuery

$('.accordion-header:nth-child(1)').addClass('active'); // 1番目にある.accordion-headerにクラスactiveを追加
$('.accordion-content:nth-child(2)').css('display', 'block'); // 2番目にある.accordion-contentにdisplay: block;を追加

$('.accordion-header').click(function() {
    $(this).next().slideToggle(); // Toggleは「交互に繰り返す」なので、clickすることで問題なく動く
    $(this).toggleClass('active');
});

これで最初の一つだけ開いているアコーディオンができました。

jQueryで作るFAQアコーディオン（一つずつ開く）

最後に一つずつ開くアコーディオンの作り方をご紹介します。

See the Pen
一つ開くと他が閉じるアコーディオン by GROWORKS (@groworks)
on CodePen.

解説

jQuery

$('.accordion-header').click(function() {
    $('.accordion-header').not(this).next().slideUp(); // clickされたaccordion-headerとは違う$('.accordion-header')の次にある要素をslideUpする
    $('.accordion-header').not(this).removeClass('active'); // clickされたaccordion-headerとは違う$('.accordion-header')からクラスactiveを外す
    $(this).next().slideToggle();
    $(this).toggleClass('active');
});

.not(this)という部分が出てきましたが、コメントアウトの通り「clickされたaccordion-headerとは違う」ということを指しています。
最初の一つだけ開いているアコーディオンではclickで実行される部分と関係ない部分に記述しましたが、今回はclickの度に他のアコーディオンが閉じる必要があるのでclickで実行される部分の中に記述しました。

まとめ

FAQのアコーディオンは、見た目は複雑に見えるかもしれませんが、実際には簡単に追加できます。
上記のサンプルコードを使うことで、誰でも手軽にアコーディオンメニューを実装できます。ウェブサイトに「よくある質問」を始めとした見出しだけ見せたいコンテンツを追加する際に、積極的に活用してみてください。