Тег <details> вказує додаткові відомості які користувач може за вимогою приховати або переглянути.
Початковий вміст елемента <details> приховано, замість нього виводиться текст «Детальніше», клацнувши на який ви приховаєте або відобразете вміст елемента.
Будь-який вид контенту може бути поміщений всередині тега <details>. Наприклад, тег <details> може бути використаний для створення інтерактивного віджета, який користувач може відкривати і закривати.
Вміст html тега <details> не буде видимий, доки не встановлений атрибут open.
Тег в дії:
Відкрити повністю
Цей текст не було видно доки ви не натиснули на заголовок
HTML5, реально, спрощує життя
| Нотатка: |
Порада: HTML тег <summary> використовується для вказівки видимого заголовку для деталей. При натисканні на заголовок ви можете переглянути чи приховати подробиці. |
Синтакс
<details open>Текст</details>
Приклади
Найпростіший приклад використання HTML тега <details>
До попереднього тегу
До наступного тегу