【jQuery】アコーディオンメニュー

はじめに

どうも、NNCの石上です。
突然ですが、「よくある質問」っていうコンテンツ、結構色んなサイトにありますよね。その多くが、「アコーディオンメニュー」と呼ばれる形態で実装されています。今日はそちらに挑戦してみましょう。

アコーディオンメニュー

今日作成するのは「アコーディオンメニュー」です。クリックに応じてコンテンツが見え隠れする物になります。

通常時は見出しだけが見えている状態です。これをクリックすると…

対応するコンテンツが出てきました。もちろん、もう一度クリックすると隠れます。

実際のコード

       <ul class="faq">
                <li class="faq__item">
                    <div class="faq__head">
                        <span>Q</span>
                        <h2>テキストが入ります</h2>
                    </div>
                    <div class="faq__body">
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia animi quaerat cupiditate possimus, recusandae, eum molestias error ullam eos quam enim vitae placeat perferendis aspernatur quia magnam, excepturi inventore ab!
                            Saepe deserunt eos culpa eligendi at delectus quae amet harum, voluptatum, reiciendis dolor corrupti dolores unde voluptatibus. Ad harum at vel consequatur? Nam eaque, sunt fuga reiciendis delectus officia. Veritatis?
                            Minus odio dignissimos veniam facere hic? Tenetur dolorum consequuntur laboriosam temporibus natus blanditiis reprehenderit id? Dolore recusandae ea laborum, doloribus cumque perspiciatis minima magni explicabo velit earum accusantium perferendis libero?
                        </p>
                    </div>
                </li>
                <li class="faq__item">
                    <div class="faq__head">
                        <span>Q</span>
                        <h2>テキストが入ります</h2>
                    </div>
                    <div class="faq__body">
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia animi quaerat cupiditate possimus, recusandae, eum molestias error ullam eos quam enim vitae placeat perferendis aspernatur quia magnam, excepturi inventore ab!
                            Saepe deserunt eos culpa eligendi at delectus quae amet harum, voluptatum, reiciendis dolor corrupti dolores unde voluptatibus. Ad harum at vel consequatur? Nam eaque, sunt fuga reiciendis delectus officia. Veritatis?
                            Minus odio dignissimos veniam facere hic? Tenetur dolorum consequuntur laboriosam temporibus natus blanditiis reprehenderit id? Dolore recusandae ea laborum, doloribus cumque perspiciatis minima magni explicabo velit earum accusantium perferendis libero?
                        </p>
                    </div>
                </li>
                <li class="faq__item">
                    <div class="faq__head">
                        <span>Q</span>
                        <h2>テキストが入ります</h2>
                    </div>
                    <div class="faq__body">
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia animi quaerat cupiditate possimus, recusandae, eum molestias error ullam eos quam enim vitae placeat perferendis aspernatur quia magnam, excepturi inventore ab!
                            Saepe deserunt eos culpa eligendi at delectus quae amet harum, voluptatum, reiciendis dolor corrupti dolores unde voluptatibus. Ad harum at vel consequatur? Nam eaque, sunt fuga reiciendis delectus officia. Veritatis?
                            Minus odio dignissimos veniam facere hic? Tenetur dolorum consequuntur laboriosam temporibus natus blanditiis reprehenderit id? Dolore recusandae ea laborum, doloribus cumque perspiciatis minima magni explicabo velit earum accusantium perferendis libero?
                        </p>
                    </div>
                </li>
            </ul>
body {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 1.6px;
}
.faq__item {
  padding: 20px;
  margin-bottom: 40px;
  border: 1px solid #dbdbdb;
}
.faq__head {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.faq__head span {
  font-size: 22px;
  font-weight: bold;
}
.faq__head h2 {
  margin-left: 20px;
}
.faq__body {
  display: none;
  padding-top: 20px;
}
$(function(){
	$('.faq__head').on('click',function(){
		$(this).next(".faq__body").slideToggle(900,"easeOutQuint");
	});
});

重要なのは、見出し部分とコンテンツ部分とを違うdivでくくること、コンテンツ部分は初期状態では「display:none」にしておくこと、の二つでしょうか。

解説

今回、コードの量は少なめです。例の如く大まかな流れを把握しておきましょう。

1.見出し(.faq__head)をクリックした時に、
2.その兄弟要素のコンテンツ部分(.faq__body)を表示させる。

$('.faq__head').on('click',function(){
		$(this).next(".faq__body").slideToggle(900,"easeOutQuint");
});

まずはクリックした見出し(.faq__head)に対応するコンテンツ部分のみを取得します。nextメソッドを用いて同階層に存在する兄弟要素を取得しましょう。記述形式は【対象要素.next(セレクタ)】となります。

今回のようにスライド的なコンテンツの開閉には、slideToggleメソッドが便利です。【対象要素.slideToggle(秒数、イージング)】と記述します。上の例では、「秒数は0.9秒、緩急は”easeOutQuint”でアニメーションを行う」という意味になります。
(初期状態だとjQueryで利用できるイージングは2種類しかありませんが、プラグインを導入することで種類を増やすことが出来ます。余裕のある方は「jQuery イージング プラグイン」などで検索してみましょう。)

以上で完成です!

RECENT ENTRIES

  • 【ウェブ解析】Core Web Vitalsを指標としたサイト改善方法

    VIEW MORE
  • 【jQuery】「jquery.cookie.js」で言語切り替え機能を実装する

    VIEW MORE
  • 【ウェブ解析】インプレッションにおけるSEOとMEOの重要性とは?

    VIEW MORE

CONTACT