Vanilla JSでjQueryのtoggleSlideのような動きを実現する【jQuery不使用】

アコーディオンを実装したとき、なぜかよく「jQueryのtoggleSlideに変更して」って言われます。謎です。

せっかく脱・jQueryしたのに…😂

なので今回は、Vanilla JSでjQueryのtoggleSlideのような動きを実現する方法をご紹介します。

JS（Vanilla JS）
HTML
アコーディオンのサンプル

JS（Vanilla JS）

// アコーディオン
function accordions() {
  var accordions = document.querySelectorAll('.c-accordion');

  accordions.forEach(function(accordion) {
    var accordionTarget = accordion.querySelector('.c-accordion__target');
    var accordionBtn = accordion.querySelector('.c-accordion__btn');

    accordionBtn.addEventListener('click', function() {
      var isOpen = accordion.classList.contains('is-open');

      if (isOpen) {
        accordionTarget.style.height = '0px';
      } else {
        var scrollHeight = accordionTarget.scrollHeight;
        accordionTarget.style.height = scrollHeight + 'px';
      }

      accordion.classList.toggle('is-open');
      accordionTarget.classList.toggle('is-open');
    });
  });
}

// 初期状態で閉じているように設定
document.addEventListener('DOMContentLoaded', accordions);

HTML

<div class="c-accordion">
  <h2 class="c-accordion__btn c-heading">発火ボタンはこちら</h2>
  <div class="c-accordion__target">
    <p>この中身が表示される部分</p>
  </div>
</div>

CSSはheightにtransitionを設定するくらいで、あとは見た目を整えているだけなので割愛します。

heightを動的に変更することでスライドトグルのアニメーションを再現する方法で、クリックイベントに応じてアコーディオンの高さを切り替えるという処理をしています。

またDOMContentLoadedイベントを使用して、ページ読み込み時にアコーディオンが閉じた状態になるようにしています。

同一ページ内に複数のアコーディオンを設置してもちゃんと動きます。

アコーディオンのサンプル

See the Pen Untitled by あお＠Webコーダー🐾 (@coder_ao) on CodePen.

参考になれば嬉しいです😊

PR