Intencją jest, aby wyświetlanie i ukrywanie elementów w aplikacji było kontrolowane przez jedną klasę.

Pokaż/ukryj opcje zajęć

toggler- kliknięty element (button, link, div) Jeśli dodasz ikonę do przycisku, ustaw właściwość pointer-events na none dla ikony.

activeClass- przypisujemy nazwę klasy, która zostanie przypisana do elementu (przycisku), do którego jest dołączony detektor. (przełączanie js). W przypadku braku podanego atrybutu do klikniętego elementu zostanie dodana domyślna wartość klasy "active".

showClass- nazwa klasy, która zostanie dodana do elementu, który chcemy wyświetlić. Wartość domyślna to „pokaż”. Możemy to zmienić za pomocą atrybutu danych.

targets- Lista elementów, które chcemy wyświetlić (atrybut id jest obowiązkowy)

closeElements- Lista konkretnych elementów, które chcemy zamknąć. Tab, akordeon...

Pokaż/ukryj logikę

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);- Ukryj wszystkie elementy, których identyfikatory są wymienione (klikając na jeden element, otwierasz docelowy i ukrywasz poprzednio otwarte, np. Akordeon)

openOnly- klikając na element, który ma ten atrybut, otwieramy wszystkie docelowe divy

Logika przełączania — Sprawdzanie, czy elementy docelowe są już wyświetlane na stronie. Jeśli tak, najpierw usuwamy aktywną klasę z elementów wyzwalających (wszystkich, które mają możliwość otwarcia docelowego diva). Następnie usuwamy aktywną klasę z samego elementu przełączającego. Na koniec ukrywamy elementy docelowe.

Jeśli elementy docelowe nie wyświetlają się na stronie, dodajemy klasę aktywną zarówno do elementu klikniętego, jak i elementów docelowych.

Przykładowa strona

Połączyć:https://codesandbox.io/s/toggle-w1j03g

1. Akordeon — element wyzwalający ma efekt przełączania (pole celu otwiera się i zamyka inne lub siebie)
2. Modal — przycisk otwiera modal, a inne przyciski po prostu się zamykają. Zwróć uwagę na klasę modalną, która sprawdza tylko, czy nakładka została kliknięta, aby w takim przypadku zamknąć modal. Cała reszta jest wykonywana przez klasę Toggle.
3. Wiele celów — pierwszy i drugi przycisk działają jak przełącznik, a ostatni działa jak przełącznik dla obu
4. Dropdown — proste przełączanie listy rozwijanej
5. Tab — podobnie jak akordeon, pokazuje jeden docelowy div i blisko innych
6. Offcanvas — link i przycisk jako wyzwalacze dla efektu otwartego tylko poza płótnem