L'intention est que l'affichage et le masquage des éléments dans l'application soient contrôlés par une seule classe.

Afficher/masquer les options de classe

toggler- élément cliqué (bouton, lien, div) Si vous ajoutez une icône au bouton, définissez la propriété pointer-events sur none pour l'icône.

activeClass- nous attribuons le nom de la classe qui sera attribuée à l'élément (bouton) auquel est attaché un écouteur. (js-bascule). Si l'attribut donné n'est pas présent, la valeur par défaut de la classe "active" sera ajoutée à l'élément cliqué.

showClass- un nom de classe qui sera ajouté à l'élément que nous voulons afficher. La valeur par défaut est "afficher". Nous pouvons le modifier via l'attribut data.

targets- Liste des éléments que nous souhaitons afficher (l'attribut id est obligatoire)

closeElements- Liste des éléments spécifiques que nous voulons fermer. Tablature, accordéon...

Afficher/masquer la logique

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);- Masquer tous les éléments dont les identifiants sont listés (en cliquant sur un élément, vous ouvrez celui ciblé et masquez ceux précédemment ouverts. Par exemple Accordéon)

openOnly- en cliquant sur un élément qui possède cet attribut, on ouvre toutes les divs ciblées

Basculer la logique — Vérifier si les éléments cibles sont déjà affichés sur la page. Si c'est le cas, nous supprimons d'abord la classe active des éléments déclencheurs (tous ceux qui ont la possibilité d'ouvrir la div ciblée). Ensuite, nous supprimons la classe active de l'élément toggle lui-même. Enfin, nous masquons les éléments cibles.

Si les éléments cibles ne sont pas affichés sur la page, nous ajoutons la classe active à la fois à l'élément cliqué et aux éléments cibles.

Exemple de page

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

1. Accordéon - l'élément déclencheur a un effet de bascule (la boîte cible s'ouvre et se ferme les autres ou elle-même)
2. Modal - le bouton ouvre le modal et les autres boutons se ferment. Faites attention à la classe modale, qui ne vérifie que si la superposition est cliquée, afin de fermer le modal dans ce cas. Tout le reste est fait par la classe Toggle.
3. Cibles multiples - Le premier et le deuxième bouton agissent comme une bascule et le dernier agit comme une bascule pour les deux
4. Liste déroulante - simple basculement de la liste déroulante
5. Tab - similaire à l'accordéon un montre une div cible et à proximité des autres
6. Offcanvas - lien et bouton comme déclencheurs pour l'effet ouvert uniquement hors canevas