La intención es que mostrar y ocultar elementos en la aplicación estén controlados por una sola clase.

Mostrar/ocultar opciones de clase

toggler- elemento en el que se hizo clic (botón, enlace, div) Si agrega un icono al botón, establezca la propiedad pointer-events en ninguno para el icono.

activeClass- asignamos el nombre de la clase que se asignará al elemento (botón) que tiene un oyente adjunto. (js-alternar). Si el atributo dado no está presente, el valor predeterminado de la clase "activa" se agregará al elemento en el que se hizo clic.

showClass- un nombre de clase que se agregará al elemento que queremos mostrar. El valor predeterminado es "mostrar". Podemos cambiarlo a través del atributo data.

targets- Lista de elementos que queremos mostrar (el atributo id es obligatorio)

closeElements- Lista de elementos específicos que queremos cerrar. Tabulador, acordeón...

Mostrar/ocultar lógica

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);- Oculte todos los elementos cuyos identificadores se enumeran (al hacer clic en un elemento, abre el objetivo y oculta los abiertos previamente. Por ejemplo, Acordeón)

openOnly- al hacer clic en un elemento que tiene este atributo, abrimos todos los divs específicos

Alternar lógica: verificar si los elementos de destino ya se muestran en la página. Si es así, primero eliminamos la clase activa de los elementos desencadenantes (todos aquellos que tienen la posibilidad de abrir el div de destino). A continuación, eliminamos la clase activa del propio elemento de alternancia. Finalmente, ocultamos los elementos de destino.

Si los elementos de destino no se muestran en la página, agregamos la clase activa tanto al elemento en el que se hizo clic como a los elementos de destino.

Página de ejemplo

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

1. Acordeón: el elemento disparador tiene un efecto de alternancia (el cuadro de destino se abre y cierra a otros o a sí mismo)
2. Modal: el botón abre el modal y otros botones simplemente se cierran. Preste atención a la clase modal, que solo verifica si se hace clic en la superposición, para cerrar el modal en ese caso. Todo lo demás lo hace la clase Toggle.
3. Múltiples objetivos: el primer y segundo botón actúan como alternar y el último actúa como alternar para ambos
4. Desplegable: alternar menú desplegable simple
5. Pestaña: similar al acordeón, uno muestra un div de destino y cerca de otros
6. Offcanvas: enlace y botón como activadores del efecto de solo apertura fuera del lienzo