<details> - елемент розкриття деталей

HTML-тег <details> створює віджет, що розкривається, в якому інформація видима тільки тоді, коли віджет переключений у стан "відкрито".

Всередині тега <details> зазвичай розміщують тег <summary>, який слугує заголовком для віджета. Натискання на заголовок перемикає стан видимості вмісту.

HTML
<details>
  <summary>Заголовок</summary>
  Прихований вміст...
</details>

Атрибути

Цей тег може мати глобальні атрибути.

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

Технічне резюме

Категорія контенту	Потоковий контент, інтерактивний контент, відчутний контент.
Дозволений вміст	Один елемент `<summary>`, за яким слідує потоковий контент.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає потоковий контент.
Роль ARIA	`group`
Дозволені ARIA атрибути	Ніякі
DOM інтерфейс	`HTMLDetailsElement`

Приклади використання

<details>
  <summary>Деталі</summary>
  <p>Тут знаходиться додаткова інформація, яка спочатку прихована.</p>
</details>

<details open>
  <summary>Відкрито за замовчуванням</summary>
  <p>Цей вміст видимий одразу при завантаженні сторінки.</p>
</details>

Стилі за замовчуванням

CSS
details {
  display: block;
}

summary {
  display: list-item;
  cursor: pointer;
}

Підтримка браузерів



`<details>`
`name`
`open`