JS метод DOMTokenList.toggle()

Загальний опис

toggle() є методом, який додає або видаляє токен з об'єкта DOMTokenList, що представляє список токенів, наприклад, список класів CSS елемента. Цей метод корисний для динамічного керування станом елементів на веб-сторінці без необхідності перевіряти, чи вже присутній токен у списку.

Метод toggle() може приймати один або два аргументи. Перший аргумент - це рядок, що представляє токен, який потрібно додати або видалити. Другий, необов'язковий аргумент - логічне значення, яке визначає, чи потрібно примусово додати або видалити токен, незалежно від його поточного стану.

Якщо передано лише один аргумент (токен), toggle() перевіряє, чи присутній цей токен у списку. Якщо токен присутній, він видаляється зі списку, інакше - додається. Наприклад:

const element = document.getElementById('myElement');
const classes = element.classList;

classes.toggle('active'); // Додає клас 'active', якщо його немає, або видаляє, якщо він є

Якщо передано два аргументи, логічне значення другого аргументу визначає, чи потрібно додати або видалити токен, незалежно від його поточного стану. Наприклад:

const element = document.getElementById('myElement');
const classes = element.classList;

classes.toggle('active', true); // Гарантовано додає клас 'active'
classes.toggle('active', false); // Гарантовано видаляє клас 'active'

Метод toggle() часто використовується для керування станами елементів інтерфейсу, наприклад, для реалізації розкривних меню, вкладок, модальних вікон тощо. Його зручно використовувати разом з подіями користувача, такими як клік або наведення курсору.

Наприклад, розглянемо реалізацію розкривного меню:

<nav>
  <button id="menuToggle">Меню</button>
  <ul id="menu" class="hidden">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</nav>

const menuToggle = document.getElementById('menuToggle');
const menu = document.getElementById('menu');

menuToggle.addEventListener('click', function() {
  menu.classList.toggle('hidden');
});

У цьому прикладі ми використовуємо toggle('hidden') для показу або приховування меню при кліку на кнопку. Якщо клас hidden присутній в елементі menu, він видаляється, що робить меню видимим. Якщо класу hidden немає, він додається, приховуючи меню.

DOMTokenList.toggle() є зручним і гнучким методом для керування станами елементів на веб-сторінці. Він дозволяє уникнути складної логіки перевірки наявності токенів і забезпечує простий та ефективний спосіб маніпулювати класами CSS елементів.

Синтаксис

toggle(token)
toggle(token, force)

Параметри

*token

Рядок, що представляє токен, який потрібно перемкнути.

force

Якщо включено, перетворює перемикання в однонапрямну операцію. Якщо встановлено на false, тоді токен буде лише видалено, але не додано. Якщо встановлено на true, тоді токен буде лише додано, але не видалено.

Return

boolean

Повертає логічне значення, true або false, що вказує, чи міститься токен у списку після виклику чи ні.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

<nav>
  <button id="menuToggle">Меню</button>
  <ul id="menu" class="hidden">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</nav>

<script>
const menuToggle = document.getElementById('menuToggle');
const menu = document.getElementById('menu');

menuToggle.addEventListener('click', function() {
  menu.classList.toggle('hidden');
});
</script>

<div class="tabs">
  <div class="tab-headers">
    <button class="tab-header active" data-target="tab1">Вкладка 1</button>
    <button class="tab-header" data-target="tab2">Вкладка 2</button>
    <button class="tab-header" data-target="tab3">Вкладка 3</button>
  </div>
  <div class="tab-contents">
    <div class="tab-content active" id="tab1">Контент вкладки 1</div>
    <div class="tab-content" id="tab2">Контент вкладки 2</div>
    <div class="tab-content" id="tab3">Контент вкладки 3</div>
  </div>
</div>

<script>
const tabHeaders = document.querySelectorAll('.tab-header');

tabHeaders.forEach(function(header) {
  header.addEventListener('click', function() {
    const targetId = this.dataset.target;
    const targetContent = document.getElementById(targetId);

    // Видаляємо клас "active" з усіх заголовків та контентів
    tabHeaders.forEach(function(header) {
      header.classList.remove('active');
    });
    document.querySelectorAll('.tab-content').forEach(function(content) {
      content.classList.remove('active');
    });

    // Додаємо клас "active" до поточного заголовка та контенту
    this.classList.toggle('active', true);
    targetContent.classList.toggle('active', true);
  });
});
</script>