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

2021/07/19 JavaScript

lazyload.jsとスピナーアイコンを組み合わせる

2021/02/19 JavaScript

ユーザーエージェントを判定してスマホ用サイトに飛ばす

2020/07/31 JavaScript

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

2019/11/12 JavaScript

jQueryで作るテキストモーダルウィンドウ