Тег <details> определяет дополнительную информацию, которую пользователь может по желанию открыть или скрыть.
Элемент <details> может использоваться для создания интерактивного виджета, который пользователь может открывать и закрывать. Внутри тега <details> можно размещать любой контент.
Содержимое элемента <details> должно быть скрыто до тех пор, пока не будет установлен атрибут open.
Для определения видимого заголовка доп.информации в теге <details> используется элемент <summary>. На заголовок можно нажимать. Это откроет/закроет дополнительную информацию.
Разница между HTML 4.01 и HTML5
Тег <details> был добавлен в HTML5.
Атрибуты тега <details>
| Атрибут | Описание |
|---|---|
| open | Открывает элемент с дополнительной информацией |
Общие атрибуты
Тег <details> поддерживает общие атрибуты и атрибуты-события.
CSS стили по умолчанию
Большинство браузеров будут отображать тег <details> со следующими стилями
details {
display: block;
}
HTML пример использования
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>Весь текстовый и графический контент данного веб-сайта является собственностью компании Refsnes Data.</p>
</details>
