A intenção é que a exibição e ocultação de elementos na aplicação sejam controladas por uma única classe.

Mostrar/ocultar opções de classe

toggler- elemento clicado (botão, link, div) Se você adicionar um ícone ao botão, defina a propriedade pointer-events como nenhum para o ícone.

activeClass- atribuímos o nome da classe que será atribuída ao elemento (botão) que possui um listener anexado a ele. (js-toggle). Se o atributo fornecido não estiver presente, o valor padrão da classe "ativa" será adicionado ao elemento clicado.

showClass- um nome de classe que será adicionado ao elemento que queremos exibir. O valor padrão é "mostrar". Podemos alterá-lo através do atributo data.

targets- Lista de elementos que queremos exibir (o atributo id é obrigatório)

closeElements- Lista de elementos específicos que queremos fechar. Tablatura, acordeon...

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);- Ocultar todos os elementos cujos IDs estão listados (ao clicar em um elemento, você abre o de destino e oculta os abertos anteriormente. Por exemplo, acordeão)

openOnly- ao clicar em um elemento que possui esse atributo, abrimos todos os divs direcionados

Lógica de alternância — Verificando se os elementos de destino já são exibidos na página. Se for, primeiro removemos a classe ativa dos elementos de gatilho (todos aqueles que têm a possibilidade de abrir o div de destino). Em seguida, removemos a classe ativa do próprio elemento de alternância. Por fim, ocultamos os elementos de destino.

Se os elementos de destino não forem exibidos na página, adicionamos a classe ativa ao elemento clicado e aos elementos de destino.

página de exemplo

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

1. Acordeão — elemento de gatilho tem efeito de alternância (a caixa de destino abre e fecha outras ou a si mesma)
2. Modal — botão abre o modal e outros botões apenas fecham. Preste atenção na classe modal, que só verifica se o overlay foi clicado, para fechar o modal nesse caso. Todo o resto é feito pela classe Toggle.
3. Alvos Múltiplos — O primeiro e o segundo botão atuam como alternância e o último atua como uma alternância para ambos
4. Menu suspenso — alternância simples do menu suspenso
5. Tab - semelhante ao acordeão, um mostra um div de destino e próximo a outros
6. Offcanvas — link e botão como gatilhos para efeito somente aberto fora da tela