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 елементів.

Порада:	Якщо ви хочете гарантовано додати або видалити токен, незалежно від його поточного стану, використовуйте другий аргумент `DOMTokenList.toggle()`. Передайте `true` для додавання токену або `false` для його видалення. Це може бути корисним у ситуаціях, коли ви не хочете перевіряти наявність токену перед його додаванням або видаленням.
Порада:	Використовуйте `DOMTokenList.toggle()` разом з обробниками подій, такими як `click`, `mouseover` або `keydown`. Це дозволить вам створювати інтерактивні елементи інтерфейсу, які реагують на дії користувача, змінюючи свій стан. Наприклад, змінювати клас елемента при наведенні курсору миші.
Порада:	Пам'ятайте, що `DOMTokenList.toggle()` впливає лише на список токенів (класів CSS), але не на інші властивості елемента. Якщо вам потрібно змінити інші властивості, такі як стилі або атрибути, використовуйте відповідні методи або властивості об'єкта елемента.

Синтаксис

toggle(token)
toggle(token, force)

Параметри

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

Return

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

Переглядачі

Переглядач
	8	3.6	5.1	12.1	12

Переглядач
	3	18	4	5

Переглядач
	-	-

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/qBGZQLP">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

<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>

У цьому прикладі ми використовуємо DOMTokenList.toggle() для реалізації вкладок з вмістом. При натисканні на заголовок вкладки ми додаємо або видаляємо клас "active" для цього заголовка, а також відповідний клас для контенту вкладки. Це дозволяє показувати лише активний контент і приховувати решту.

<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>

JS довідник

Events

JavaScript

Statements