JS властивість Event.toggle

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

Подія toggle виникає, коли елемент <details> змінює свій стан — відкривається або закривається. Це дозволяє відслідковувати, чи розгорнутий або згорнутий елемент <details>, і відповідно до цього виконувати різні дії, наприклад, динамічно змінювати інтерфейс користувача або завантажувати додатковий контент.

Для прослуховування події toggle потрібно використовувати метод addEventListener для елемента <details>. Наприклад:

const details = document.querySelector('details');
details.addEventListener('toggle', (event) => {
  if (details.open) {
    console.log('Елемент відкрито');
  } else {
    console.log('Елемент закрито');
  }
});

У цьому прикладі, коли користувач відкриває або закриває елемент <details>, подія toggle буде викликатися. Властивість open повертає true, якщо елемент відкритий, і false, якщо він закритий. Це дає змогу створювати більш інтерактивні розділи на сторінці, де користувач може самостійно вирішувати, чи бачити додаткову інформацію або ховати її.

Подія toggle є унікальною для елемента <details> і не спрацьовує на інших типах елементів. Це робить її ідеальним вибором для створення динамічних елементів на сторінках, які можуть відкриватися і закриватися без додаткового JavaScript-коду для управління видимістю.

Наприклад, можна використовувати подію toggle для завантаження або видалення даних, коли користувач відкриває або закриває елемент, що може зменшити кількість завантажених ресурсів на початку завантаження сторінки. У деяких випадках подія може бути корисною для аналітики, коли важливо знати, які елементи інтерфейсу були відкриті або закриті користувачем.

Подія не спрацьовує, якщо ви програмно встановлюєте значення властивості open, але її можна використовувати разом із програмним керуванням станом, що робить її універсальним інструментом для створення взаємодіючих компонентів.

правити

Порада

Якщо потрібно виконувати різні дії при відкритті та закритті елемента, можна перевіряти властивість open. Вона повертає булеве значення, яке можна використовувати для умовної логіки, як у наведеному вище прикладі з виведенням повідомлень у консоль.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('toggle', function(event) {
  // Ваш код
});

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<details>демо</details>

const details = document.querySelector('details');

details.addEventListener('toggle', () => {
  localStorage.setItem('detailsOpen', details.open);
});

// Відновлення стану після перезавантаження сторінки
if (localStorage.getItem('detailsOpen') === 'true') {
  details.open = true;
}

<details>демо</details>

const details = document.querySelector('details');
const content = document.querySelector('#extra-content');

details.addEventListener('toggle', async () => {
  if (details.open) {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    content.innerText = `Завантажений контент: ${data.title}`;
  } else {
    content.innerText = '';
  }
});