L'intenzione è che la visualizzazione e l'occultamento degli elementi nell'applicazione siano controllati da una singola classe.

Mostra/nascondi le opzioni della classe

toggler- elemento cliccato (pulsante, link, div) Se aggiungi un'icona al pulsante, imposta la proprietà pointer-events su none per l'icona.

activeClass- assegniamo il nome della classe che verrà assegnata all'elemento (pulsante) a cui è associato un listener. (js-toggle). Se l'attributo dato non è presente, il valore predefinito della classe "attiva" verrà aggiunto all'elemento cliccato.

showClass- un nome di classe che verrà aggiunto all'elemento che vogliamo visualizzare. Il valore predefinito è "mostra". Possiamo cambiarlo attraverso l'attributo data.

targets- Elenco degli elementi che vogliamo visualizzare (l'attributo id è obbligatorio)

closeElements- Elenco di elementi specifici che vogliamo chiudere. Tablatura, fisarmonica...

Mostra/nascondi logica

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);- Nascondere tutti gli elementi i cui ID sono elencati (facendo clic su un elemento, si apre quello mirato e si nascondono quelli aperti in precedenza. Ad esempio Fisarmonica)

openOnly- cliccando su un elemento che ha questo attributo, apriamo tutti i div mirati

Toggle logic — Verifica se gli elementi di destinazione sono già mostrati sulla pagina. Se lo è, rimuoviamo prima la classe attiva dagli elementi trigger (tutti quelli che hanno la possibilità di aprire il div mirato). Successivamente, rimuoviamo la classe attiva dall'elemento toggle stesso. Infine, nascondiamo gli elementi target.

Se gli elementi di destinazione non vengono visualizzati sulla pagina, aggiungiamo la classe attiva sia all'elemento cliccato che agli elementi di destinazione.

Pagina di esempio

Collegamento:https://codesandbox.io/s/toggle-w1j03g

1. Fisarmonica: l'elemento di attivazione ha un effetto di commutazione (il riquadro del bersaglio si apre e chiude gli altri o se stesso)
2. Modale: il pulsante apre il modale e gli altri pulsanti si chiudono. Prestare attenzione alla classe modale, che controlla solo se si fa clic sull'overlay, al fine di chiudere il modale in quel caso. Tutto il resto viene svolto dalla classe Toggle.
3. Obiettivi multipli: il primo e il secondo pulsante agiscono come un interruttore e l'ultimo agisce come un interruttore per entrambi
4. Dropdown: semplice attivazione/disattivazione del menu a discesa
5. Scheda: simile alla fisarmonica, mostra un div target e vicino ad altri
6. Offcanvas: collegamento e pulsante come trigger per l'effetto solo aperto off-canvas