Пример
Укажите детали, которые пользователь может открывать и закрывать по своему желанию:
<details>
<summary>Центр Эпкот</summary>
<p>Эпкот — это
тематический парк в курортном комплексе «Мир Уолта Диснея», предлагающий захватывающие аттракционы,
международные павильоны, отмеченные наградами фейерверки и сезонные специальные
мероприятия.</p>
</details>
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Тег <details> определяет дополнительные детали, которые пользователь может
открывать и закрывать по своему требованию.
Тег <details> часто используется для создания интерактивного виджета, который пользователь может
открывать и закрывать. По умолчанию виджет закрыт. При открытии он расширяется и
отображает содержимое внутри.
Внутрь тега <details> можно поместить любой вид содержимого.
Совет: Тег <summary> используется вместе с
<details> для
указания видимого заголовка для деталей.
Поддержка браузерами
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <details> | 12 | 79 | 49 | 6 | 15 |
| name | 120 | 120 | 130 | 17.2 | 106 |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| open | open | Указывает, что детали должны быть видимыми (открытыми) для пользователя |
| name | groupname | Задает имя группы — при использовании одного имени для нескольких элементов <details> пользователь может открыть только одно диалоговое окно за раз |
Глобальные атрибуты
Тег <details> также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег <details> также поддерживает атрибуты событий в HTML.
Больше примеров
Пример
Используйте CSS для стилизации <details> и <summary>:
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
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>Центр Эпкот</summary>
<p>Эпкот — это тематический парк в курортном комплексе «Мир Уолта Диснея»,
предлагающий захватывающие аттракционы, международные павильоны,
отмеченные наградами фейерверки и сезонные специальные мероприятия.</p>
</details>
</body>
</html>
Попробуйте сами »
Связанные страницы
Справочник HTML DOM: Объект Details
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <details> со следующими значениями по умолчанию:
details {
display: block;
}