HTML Тег <details>
Приклад
Укажіть деталі, які користувач може відкривати та закривати на вимогу:
<details>
<summary>Epcot Center</summary>
<p>Epcot — це тематичний парк на курорті Walt Disney World Resort із захоплюючими атракціонами, міжнародними павільйонами, відзначеними нагородами феєрверками та сезонними спеціальними подіями.</p>
</details>
Спробуйте самі »
Більше прикладів "Спробуйте самі" нижче.
Визначення та використання
Тег <details> визначає додаткові деталі, які користувач може відкривати та закривати на вимогу.
Тег <details> часто використовується для створення інтерактивного віджета, який користувач може відкривати та закривати. За замовчуванням віджет закрито. Коли він відкритий, він розгортається та відображає вміст у ньому.
У тезі <details> можна розмістити будь-який вміст.
Порада: Тег <summary> використовується в поєднанні з тегом <details>, щоб визначити видимий заголовок для деталей.
Підтримка браузерами
Число в таблиці визначає першу версію браузера, що повністю підтримує елемент.
| Елемент | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| open | open | Вказує, що деталі мають бути видимими (відкритими) для користувача |
Глобальні атрибути
Тег <details> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <details> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Використання CSS для стилізації <details> та <summary>:
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
<summary>Epcot Center</summary>
<p>Epcot — це тематичний парк на курорті Walt Disney World Resort із захоплюючими атракціонами, міжнародними павільйонами, відзначеними нагородами феєрверками та сезонними спеціальними подіями.</p>
</details>
</body>
</html>
Спробуйте самі »
Пов’язані сторінки
HTML DOM довідник: Об’єкт Details
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <details> з наступними значеннями за замовчуванням:
details {
display: block;
}
