1個開けると他は閉じるアコーディオンメニュー

今回やりたいこと

アコーディオンメニューがずら~っと並んでいると、次々開いていくと画面がどんどん下に伸びていってしまいますよね。

アコーディオンメニューが多い時は、どれか1つだけが開いた状態にした方が見やすく、画面も下に伸びないので見やすいです。

今回はそんな実装を可能にするjQueryの記述を紹介します。

jQuery

まずソースはこんな感じです。


$(function() {
  var trigger = $(".js-trigger"); // トリガー定義
  trigger.on("click", function() {
    if ($(this).hasClass("is-open")) {
      $(this)
        .next() 
        .slideUp();  // 次の要素をslideUp

    } else {
      $(this)
        .next()
        .slideDown(); // 次の要素をslideDown

      trigger
        .not($(this)) // クリックしてないtrigger
        .next()  

        .slideUp();
      trigger.not($(this)).removeClass("is-open");
    }
  });
});

コメントで説明を入れていますが、軽く説明すると、ポイントは「.not($(this))」です。「.not()」で除外する要素をセレクタで指定することができます。

.not()のリファレンス

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらです。ありがとうございました。

related article

2020/01/14 JavaScript

.index( )と.eq( )を使った効率的なモーダル表示

2020/07/31 JavaScript

Youtubeをスマホでインライン自動再生させる

2019/11/19 JavaScript

slideUpやslideDownを使ったときのレスポンシブ対応

2019/10/27 JavaScript

ページ遷移のたびに要素をふわっと表示させる