Тег <details>

<details> створює віджет, що розгортається/згортається по кліку, без жодного JavaScript. Заголовок задається через summary.

Syntax

<details>
  <summary>Заголовок</summary>
  Вміст
</details>

Attributes

open	Якщо присутній, вміст показано розгорнутим одразу при завантаженні.

Example

<details open>
  <summary>Що входить у тариф?</summary>
  <p>Необмежена кількість інструментів.</p>
</details>

Notes

Без summary браузер показує стандартний текст-заглушку замість заголовка.

Accessibility

details/summary доступні з клавіатури й озвучуються screen-читачами нативно, без додаткової ARIA-розмітки.

Схожі інструменти

Тег <summary>

Призначення тегу <summary>: клікабельний заголовок для розгортання details.

Accordion (details/summary)

Нативний акордеон на details/summary, доступний з коробки, без JS.