【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 イージング プラグイン」などで検索してみましょう。)

以上で完成です!

こちらの記事はいかがでしたか?
+1
0
+1
0
+1
0
+1
0

【PR】オリジナルキャラクター「てくてくず」を公開しました!

作品は、随時X(旧Twitter)で公開していきます!
ぜひ「てくてくず」の作品を応援していただけたら嬉しいです。

X(旧Twitter)アカウントはこちら:
https://twitter.com/tech_tech_zoo

RECENT ENTRIES

  • 【サンプルあり】スクロールに連動した要素やマスクのサイズ変更【JavaScript / jQuery】

    VIEW MORE
  • 【基本〜事例まで解説】jQueryのsplitメソッド: 文字列を簡単に分割してみよう!

    VIEW MORE
  • CSVで投稿・記事を一括アップロード!カスタムフィールドを使用した場合の事例つき【WordPress】

    VIEW MORE

CONTACT

contact