Die Absicht besteht darin, dass das Ein- und Ausblenden von Elementen in der Anwendung von einer einzigen Klasse gesteuert wird.

Klassenoptionen ein-/ausblenden

toggler- angeklicktes Element (Schaltfläche, Link, Div) Wenn Sie der Schaltfläche ein Symbol hinzufügen, setzen Sie die Eigenschaft pointer-events für das Symbol auf „none“.

activeClass- Wir weisen den Namen der Klasse zu, die dem Element (Schaltfläche) zugewiesen wird, an das ein Listener angehängt ist. (js-toggle). Wenn das angegebene Attribut nicht vorhanden ist, wird dem angeklickten Element der Standardwert der Klasse „aktiv“ hinzugefügt.

showClass– ein Klassenname, der dem Element hinzugefügt wird, das wir anzeigen möchten. Der Standardwert ist „show“. Wir können es über das Datenattribut ändern.

targets- Liste der Elemente, die wir anzeigen möchten (ID-Attribut ist obligatorisch)

closeElements– Liste spezifischer Elemente, die wir schließen möchten. Tabulatur, Akkordeon...

Logik ein-/ausblenden

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);- Alle Elemente ausblenden, deren IDs aufgelistet sind (durch Klicken auf ein Element öffnen Sie das Zielelement und verbergen zuvor geöffnete Elemente. Zum Beispiel Akkordeon)

openOnly- Durch Klicken auf ein Element mit diesem Attribut öffnen wir alle Ziel-Divs

Toggle-Logik – Überprüfung, ob die Zielelemente bereits auf der Seite angezeigt werden. Wenn dies der Fall ist, entfernen wir zunächst die aktive Klasse aus den Triggerelementen (alle diejenigen, die die Möglichkeit haben, das Ziel-Div zu öffnen). Als nächstes entfernen wir die aktive Klasse aus dem Toggle-Element selbst. Schließlich verstecken wir die Zielelemente.

Wenn die Zielelemente nicht auf der Seite angezeigt werden, fügen wir die aktive Klasse sowohl dem angeklickten Element als auch den Zielelementen hinzu.

Beispielseite

Verknüpfung:https://codesandbox.io/s/toggle-w1j03g

1. Akkordeon – Auslöserelement hat Umschalteffekt (Zielfeld öffnet und schließt andere oder sich selbst)
2. Modal – Schaltfläche öffnet das Modal und andere Schaltflächen werden einfach geschlossen. Achten Sie auf die Modal-Klasse, die nur prüft, ob auf das Overlay geklickt wird, um in diesem Fall das Modal zu schließen. Alles andere erledigt die Toggle-Klasse.
3. Mehrere Ziele – Die erste und zweite Taste fungieren als Umschalter und die letzte als Umschalter für beide
4. Dropdown – einfacher Dropdown-Schalter
5. Tab – ähnlich wie beim Akkordeon zeigt man ein Ziel-Div und in der Nähe anderer an
6. Offcanvas – Link und Schaltfläche als Auslöser für den Off-Canvas-Open-Only-Effekt