Тег <details>

Синтаксис

Описание

Тег <details> (от англ. details — подробности, данные) используется для хранения информации, которую можно скрыть или показать по требованию пользователя.

По умолчанию содержимое тега скрыто. Для того, чтобы раскрыть содержимое, необходимо применить атрибут open.

С помощью тега <summary> можно указать заголовок, при нажатии на который будет открываться/закрываться дополнительная информация. Если заголовка нет, то по умолчанию браузер показывает заголовок “Подробнее”.

Атрибуты, которые можно использовать в теге <details>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут	Значение	Описание
open	не указывается / open	Логический атрибут. Если он указан, то дополнительная информация будет видна сразу (при загрузке страницы). По умолчанию дополнительная информация скрыта

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег details</title>

</head>

<body>

<details>

<summary>Спойлер!</summary>

<p>На нашем сайте много актуальной и полезной информации.</p>

</details>

</body>

</html>

Отображение в браузере:

Спойлер!

На нашем сайте много актуальной и полезной информации.

Параметры CSS по умолчанию

details {
display: block;
}

Поддержка браузера

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<details>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

Да