HTML таг details
Пример
Кратък пример как се използва тагът <details>.
<details>
<summary>Покажи повече информация</summary>
<p>Това е скрито съдържание, което се показва, когато потребителят разгъне детайлите.</p>
</details>Дефиниция и употреба
Виж как се ползва тагът <details>.
Елементът <details> се използва за създаване на разгъваеми/свиваеми секции със съдържание. Първоначално съдържанието може да бъде скрито, а потребителят да го покаже чрез клик върху заглавие, което обикновено се дефинира с вътрешния елемент <summary>. Когато потребителят щракне върху заглавието, блокът се разгъва и показва вложеното съдържание (текст, изображения, списъци, формуляри и др.).
Основната структура е:
<details>
<summary>Заглавие на секцията</summary>
<p>Скрито съдържание, което се показва при разгъване.</p>
</details>
Ако атрибутът open е зададен върху <details>, секцията ще бъде разгъната по подразбиране:
<details open>
<summary>Отворено по подразбиране</summary>
<p>Този текст е видим още при зареждане на страницата.</p>
</details>
Елементът <details> подобрява достъпността и използваемостта, защото предоставя вградено поведение за показване/скриване без нужда от JavaScript и се разпознава от помощни технологии (екранни четци и др.). Подходящ е за FAQ секции, допълнителни пояснения, технически детайли, кодови блокове и всякаква второстепенна информация, която не е нужно да е видима постоянно.
Browser Support
| Browser | Поддръжка |
|---|---|
 Chrome |
✔️ |
 Firefox |
✔️ |
 Edge |
✔️ |
 Safari |
✔️ |
 Opera |
✔️ |
Атрибути
Този елемент няма специфични атрибути.