<details>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..
* Some parts of this feature may have varying levels of support.
HTML-элемент <details> используется для раскрытия скрытой (дополнительной) информации.
Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия, с меткой рядом с треугольником. Если первый дочерний элемент элемента <details> является <summary>, содержимое элемента <summary> используется в качестве метки для виджета раскрытия.
Интерактивный пример
<details> <summary>Details</summary> Something small enough to escape casual notice. </details> details { border: 1px solid #aaa; border-radius: 4px; padding: 0.5em 0.5em 0; } summary { font-weight: bold; margin: -0.5em -0.5em 0; padding: 0.5em; } details[open] { padding: 0.5em; } details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: 0.5em; } | Content categories | Flow content, sectioning root, interactive content, palpable content. |
|---|---|
| Permitted content | One <summary> element followed by flow content. |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parents | Any element that accepts flow content. |
| Permitted ARIA roles | None |
| DOM interface | HTMLDetailsElement |
Атрибуты
Элемент поддерживает только глобальные атрибуты.
open-
Данный логический атрибут указывает, будет ли дополнительная информация отображаться пользователю при загрузке страницы. По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.
Пример
<details> <summary>Some details</summary> <p>More info about the details.</p> </details> <details open> <summary>Even more details</summary> <p>Here are even more details about the details.</p> </details> Result
Примечание: Если приведённый выше пример не работает, см. Browser compatibility , чтобы определить поддерживает ли вообще ваш браузер эту функцию.
Примеры стилизации
Следуя более новой спецификации, Firefox отображает элемент summary как display: list-item и маркер можно стилизовать так же, как и элементы списка.
Следуя более старой спецификации, в Chrome and Safari существует пользовательский псевдо-элемент ::-webkit-details-marker, с помощью которого можно стилизовать маркер.
Для кроссбраузерной стилизации маркера, чтобы скрыть дефолтный и добавить кастомный, необходимо для Firefox установить элементу summary {display: block;}, а для Chrome и Safari's установить ::-webkit-details-marker {display: none;}. После этого дефолтный маркер будет скрыт, после чего можно установить свой маркер любым доступным способом стилизации. В примере ниже с помощью псевдоэлементов маркер возвращается обратно.
HTML
<details> <summary>Some details</summary> <p>More info about the details.</p> </details> CSS
summary { display: block; } summary::-webkit-details-marker { display: none; } summary::before { content: "\25B6"; padding-right: 0.5em; } details[open] > summary::before { content: "\25BC"; } Result
Спецификации
| Specification |
|---|
| HTML # the-details-element |