details и summary: разгъваем блок с HTML

Полезно е да знаеш

<details> създава разгъваем блок, а <summary> задава видимото му заглавие. Останалото съдържание се показва, когато блокът е отворен. За кратка допълнителна информация това може да замени собствен JavaScript механизъм. [1]

Примерна структура е <details><summary>Какво включва пакетът?</summary><p>Три файла и инструкция.</p></details>. Заглавието трябва да подсказва какво ще се разкрие, а не просто да казва „Още“. Примерът е условно описание на компонент.

Атрибутът open е булев: самото му наличие отваря блока. Затова open="false" не означава затворен блок; за затваряне атрибутът се премахва. [1]

Не скривай основното действие или единственото съобщение за грешка в сгъната секция, която човекът може да пропусне. Вграденото поведение улеснява реализацията, но изборът кое съдържание да бъде скрито остава част от дизайна.