HTML тег `<details>`

Значение и применение

Элемент создаёт готовый раскрывающийся блок без JavaScript. Заголовок <summary> остаётся видимым, а остальное содержимое показывается при наличии логического атрибута open. При раскрытии браузер добавляет этот атрибут, при закрытии — удаляет; open="false" тоже означает раскрытое состояние.

Тег <summary> определяет видимый заголовок для тега <details>. Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок "Подробнее").

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2020 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.details
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`details`	✓12	✓79	✓49	✓15	✓6	✓18	✓49	✓14	✓6	✓1.0	✓4.4	✓6
`name`	✓120	✓120	✓130	✓106	✓17.2	✓120	✓130	✓80	✓17.2	✓25.0	✓120	✓17.2
`open`	✓12	✓79	✓49	✓15	✓6	✓18	✓49	✓14	✓6	✓1.0	✓4.4	✓6
Auto-opens when matched via page search	✓97	✓97	✓148	✓83	◐26.2	✓97	✓148	✓68	◐26.2	✓18.0	✓97	◐26.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`open`	`open`	Это логический атрибут, который указывает, что информация (детали) будут видны (отображены) пользователю при загрузке страницы. По умолчанию является ложным и поэтому детали скрываются от пользователя.
`name`	имя группы	Объединяет блоки с одинаковым непустым именем в аккордеон: при открытии одного остальные закрываются. Блоки не обязаны стоять рядом; не вкладывайте блок в другую часть той же группы. В старом браузере без поддержки группировки они работают независимо.

Примеры, попробуйте сами

Раскрывающийся блок

Нажмите заголовок или добавьте open к details.

index.html

HTML

<details>
  <summary>Как проверить пример?</summary>
  <p>Измените разметку и посмотрите результат.</p>
</details>

Значение CSS по умолчанию

CSS

details {
display : block;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <details>