Вы здесь

HTML тег details

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

Элемент <details> может использоваться для создания интерактивного виджета, который пользователь может открывать и закрывать. Внутри тега <details> можно размещать любой контент.

Содержимое элемента <details> должно быть скрыто до тех пор, пока не будет установлен атрибут open.

Для определения видимого заголовка доп.информации в теге <details> используется элемент <summary>. На заголовок можно нажимать. Это откроет/закроет дополнительную информацию.

Разница между HTML 4.01 и HTML5
Тег <details> был добавлен в HTML5.
Атрибуты тега <details>
Атрибут Описание
open Открывает элемент с дополнительной информацией
HTML пример


<details>
   <summary>Copyright 1999-2014.</summary>
   <p> - by Refsnes Data. All Rights Reserved.</p>
   <p>Весь текстовый и графический контент данного веб-сайта является собственностью компании Refsnes Data.</p>
</details>

CSS стили по умолчанию

Большинство браузеров будут отображать тег <details> со следующими стилями


details { 
    display: block;
}