最近は脱jQueryの動きが顕著になってきましたね。
僕自身も現在はNext.jsやAstroといったフレームワークを使用する頻度が多くなり、新規の案件でjQueryを使用することはありません。

とはいってもjQueryをメインで使う人からしたら、なかなか素のJavaScriptって複雑なイメージが多くて手を出しづらいですよね、、。

でも、素のJavaScriptでもjQueryとほとんど変わらないくらい簡単に実装できるんです。
今回はjQueryを使用せず、素のJavaScriptだけでアコーディオンメニューの実装方法を解説していきます。

完成のデモはこちら。

比較の対象のためにjQueryでアコーディオンメニューのコードも書いてみました。
対処のDomにclickイベントをつけてslideToggleで要素の開閉をして、toggleClassでクラスの付けはずしをしてボタンのマイナスとプラスを切り替える。
簡単ですね。

$(function () {
        $(".js-accordion-button").on("click", () => {
        $(this).next().slideToggle();
        $(this).toggleClass("open");
  });
});

次に素のJavaScriptのコードがこちら。

const accordion = document.querySelector('.js-accordion');

button.addEventListener('click', () => {
        button.classList.toggle('accordion-active')
})

なんか、すごく簡単そうですねよね。

解説していきます。

• document.quetySelectorでclickイベントをつけたいdom要素を取得します。
• addEventListenerでclickイベントを付与します。
• classList.toggleでclickイベントが発火する度にaccordion-activeのクラスを付けはずしします。
  

jQueryとやってる事は変わらないですね。

ただ、slideToggleのようなメソットはないので、アコーディオンが開く時のぬるっと開いて、ぬるっと閉じるといった動作は自分でつけてあげる必要があります。

それはcssでつけていきます。

.accordion .accordion-active {
    display: none;
}

.accordion .accordion-active {
    display: block;
    animation: .4s fadeIn;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate(0, -20px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

こんな感じ。
全然難しくないですね。

これならjQueryを使わなくてもアコーディオンを実装できそうじゃないですか？

ちなみにdemで載せたように複数アコーディオンメニューを実装する場合は、document.quetySelectoAllを使用して全ての対象のdomを取得して、forEachでループ処理を書く必要があります。

    const accordion = document.querySelectorAll('.js-accordion');
    accordion.forEach((item) => {
        const button = item.querySelector('.js-accordion-button')
        button.addEventListener('click', () => {
            item.classList.toggle('accordion-active')
        })
    })

forEachを使用すると少し複雑にはなりますが、やってる事としては同じです。

今回はforEachの解説は省きますが、アコーディオンメニューのように簡単なものから素のJavaScriptが書けるようになっていきましょう！