Цель состоит в том, чтобы отображение и скрытие элементов в приложении контролировалось одним классом.

Показать/скрыть параметры класса

toggler- нажатый элемент (кнопка, ссылка, div) Если вы добавляете значок к кнопке, установите для свойства pointer-events значение none.

activeClass— присваиваем имя класса, которое будет присвоено элементу (кнопке), к которому привязан слушатель. (js-переключить). Если данный атрибут отсутствует, к выбранному элементу будет добавлено значение по умолчанию «активного» класса.

showClass- имя класса, которое будет добавлено к элементу, который мы хотим отобразить. Значение по умолчанию — «показать». Мы можем изменить его через атрибут данных.

targets- Список элементов, которые мы хотим отобразить (атрибут id обязателен)

closeElements- Список конкретных элементов, которые мы хотим закрыть. Таб, аккордеон...

Показать/скрыть логику

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);- Скрыть все элементы, идентификаторы которых указаны в списке (нажав на один элемент, вы откроете целевой и скроете ранее открытые. Например Аккордеон)

openOnly- нажав на элемент, имеющий этот атрибут, мы открываем все целевые div'ы

Логика переключения — проверка того, отображаются ли уже целевые элементы на странице. Если это так, мы сначала удаляем активный класс из триггерных элементов (всех тех, у которых есть возможность открыть целевой div). Затем мы удаляем активный класс из самого переключаемого элемента. Наконец, мы скрываем целевые элементы.

Если целевые элементы не отображаются на странице, мы добавляем активный класс как к выбранному элементу, так и к целевым элементам.

Пример страницы

Связь:https://codesandbox.io/s/toggle-w1j03g

1. Аккордеон — триггерный элемент имеет эффект переключения (целевое окно открывается и закрывается другими или само собой)
2. Modal — кнопка открывает модальное окно, а остальные кнопки просто закрывают. Обратите внимание на модальный класс, который только проверяет, нажат ли оверлей, чтобы в этом случае закрыть модальное окно. Все остальное делает класс Toggle.
3. Множественные цели — первая и вторая кнопки действуют как переключатель, а последняя действует как переключатель для обоих.
4. Dropdown — простой переключатель раскрывающегося списка
5. Tab — аналогично аккордеону, показывает один целевой div и рядом с другими
6. Offcanvas — ссылка и кнопка как триггеры для эффекта открытия только вне холста