GSAPでシンプルにアコーディオン実装のメモ

<div class="accordion js-accordion" data-accordion-state="close">
  <div class="accordion__header js-accordion-opener">
    <p>アコーディオンを開く</p>
  </div>
  <div class="accordion__content js-accordion-content">
    <p>アコーディオンの内容がはいります。アコーディオンの内容がはいります。アコーディオンの内容がはいります。アコーディオンの内容がはいります。</p>
  </div>
</div>

.accordion__content {
  display: none;
}

[data-accordion-state='close'] .accordion__header:after {
  /*閉じている時(プラスアイコン) */
  content: '\2b';
}

[data-accordion-state='open'] .accordion__header:after {
  /*開いている時(マイナスアイコン) */
  content: '\f068';
}

// アコーディオンの要素を全て取得
const accordions = document.querySelectorAll('.js-accordion');

// アニメーション中かどうかを管理するフラグ
// weakmapを使うことで、DOM要素に直接プロパティを追加せずに状態を管理できる
const animatingFlag = new WeakMap();

accordions.forEach((accordion) => {
  // 各アコーディオン内の開閉要素とコンテンツを取得
  const opener = accordion.querySelector('.js-accordion-opener');
  const content = accordion.querySelector('.js-accordion-content');

  // 初期化 / 全てのアコーディオンは「アニメーションしていない」状態からスタート
  animatingFlag.set(accordion, false);

  opener.addEventListener('click', () => {
    // すでにアニメーション中なら処理をしない
    if (animatingFlag.get(accordion)) return;

    // アニメーション中フラグをセット
    animatingFlag.set(accordion, true);

    // 進行中のGSAPアニメーションを強制終了して競合を防ぐ
    gsap.killTweensOf(content);

    // 開閉状態を取得(true:open, false:close)
    const isOpen = accordion.getAttribute('data-accordion-state') === 'open';

    if (!isOpen) {
      // ▼ 開く処理（closeの状態） ▼
      // openへ状態をセット
      accordion.setAttribute('data-accordion-state', 'open');

      // 要素を表示して高さ0にセット
      gsap.set(content, {
        display: 'block',
        height: 0,
      });

      // scrollHeightまでアニメーションで展開
      gsap.to(content, {
        height: content.scrollHeight,
        duration: 0.3,
        onComplete: () => {
          // 開いた後は高さをautoに戻してレスポンシブに対応
          accordion.setAttribute('data-accordion-state', 'open');
          gsap.set(content, {
            height: 'auto',
          });
          // アニメーション中フラグを解除
          animatingFlag.set(accordion, false);
        },
      });
    } else {
      // ▼ 閉じる処理（openの状態） ▼
      // closeへ状態をセット
      accordion.setAttribute('data-accordion-state', 'close');

      // 高さ0にして、アニメーション後に非表示にする
      gsap.to(content, {
        height: 0,
        duration: 0.3,
        onComplete: () => {
          gsap.set(content, { display: 'none' });
          // アニメーション中フラグを解除
          animatingFlag.set(accordion, false);
        },
      });
    }
  });
});