その目的は、アプリケーション内の要素の表示と非表示が単一のクラスによって制御されることです。

クラスオプションの表示/非表示

toggler- クリックされた要素 (button、link、div) ボタンにアイコンを追加する場合は、そのアイコンのプロパティpointer-eventsを none に設定します。

activeClass- リスナーがアタッチされている要素 (ボタン) に割り当てられるクラスの名前を割り当てます。(js-toggle)。指定された属性が存在しない場合、「アクティブ」クラスのデフォルト値がクリックされた要素に追加されます。

showClass- 表示したい要素に追加されるクラス名。デフォルト値は「表示」です。data 属性を通じて変更できます。

targets- 表示したい要素のリスト(id属性は必須)

closeElements- 閉じたい特定の要素のリスト。タブ譜、アコーディオン…

ロジックの表示/非表示

handler = () => {
    const closeOnly = this.toggler.hasAttribute("data-close-only");
    const openOnly = this.toggler.hasAttribute("data-open-only");

    if (closeOnly) {

      this.hide(this.targets);
      return;
    }

    this.hide(this.closeElements);

    if (openOnly) {
      this.targets.forEach((target) => this.addShowClass(target));
      this.addActiveClass(this.toggler);
      return;
    }



    // Toggle logic
    if (this.IsItShown()) {      


      this.targets.forEach((target: HTMLDivElement) => {
        const id = target.id;
        const toggler = document.querySelectorAll(
          `.js-toggle[data-target*=${id}]`
        );
        if (toggler.length) {
          toggler.forEach((button) =>
            this.removeActiveClass(button as HTMLElement)
          );
        }
      });

      this.removeActiveClass(this.toggler);

      if (this.targets) {
        this.targets.forEach((target) => this.removeShowClass(target));
      }
      return;
    }

    // Open/show elements
    this.addActiveClass(this.toggler);
    if (this.targets) {
      this.targets.forEach((target) => this.addShowClass(target));
    }
  };

this.hide(this.closeElements);- ID がリストされているすべての要素を非表示にします (1 つの要素をクリックすると、対象の要素が開き、以前に開いていた要素は非表示になります。たとえば、Accordion)

openOnly- この属性を持つ要素をクリックすると、対象となるすべての div が開きます。

ロジックの切り替え — ターゲット要素がすでにページに表示されているかどうかを確認します。存在する場合は、まずアクティブ クラスをトリガー要素 (ターゲットの div を開く可能性のあるすべての要素) から削除します。次に、トグル要素自体からアクティブ クラスを削除します。最後に、ターゲット要素を非表示にします。

ターゲット要素がページに表示されていない場合は、クリックされた要素とターゲット要素の両方にアクティブ クラスを追加します。

サンプルページ

リンク：https://codesandbox.io/s/toggle-w1j03g

1. アコーディオン — トリガー要素にはトグル効果があります (ターゲット ボックスが他のボックスまたはそれ自体を開閉します)
2. モーダル — ボタンを押すとモーダルが開き、他のボタンは閉じるだけです。その場合にモーダルを閉じるために、オーバーレイがクリックされたかどうかのみをチェックするモーダル クラスに注意してください。他のすべては Toggle クラスによって行われます。
3. 複数のターゲット — 最初と 2 番目のボタンはトグルのように機能し、最後のボタンは両方のトグルのように機能します。
4. ドロップダウン — シンプルなドロップダウンの切り替え
5. タブ — アコーディオンに似ており、1 つのターゲット div を表示し、他の div を近くに表示します。
6. オフキャンバス — リンクとボタンをオフキャンバスで開くのみの効果のトリガーとして使用