HTML-элемент <details>
используется для раскрытия скрытой (дополнительной) информации.
Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия, с меткой рядом с треугольником. Если первый дочерний элемент элемента <details>
является <summary>
, содержимое элемента <summary>
используется в качестве метки для виджета раскрытия.
Content categories | Flow content, sectioning root, interactive content, palpable content. |
---|---|
Permitted content | One <summary> element followed by flow content. |
Tag omission | None, both the starting and ending tag are mandatory. |
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
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard Определение '<details>' в этой спецификации. |
Живой стандарт | |
HTML 5.1 Определение '<details>' в этой спецификации. |
Рекомендация | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 12 | In Development | 49.0 (49.0) | Нет | 15 | 6 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.0 | In Development | 49.0 (49.0) | Нет | Нет | 6.1 |