HTML :: Тег <details>

В HTML тег <details> (от англ. details – подробности, данные) используется для хранения дополнительной информации на странице, которую можно скрыть или показать по требованию пользователя. По умолчанию при загрузке страницы содержимое <details> скрыто, но вместо него показывается метка (обычно в виде треугольника), при нажатии на которую пользователь может открывать или скрывать содержимое элемента. При этом, если первым дочерним элементом у <details> является <summary>, то содержимое элемента <summary> используется в качестве метки для виджета раскрытия.

Синтаксис

	<details>
		<summary>Текст</summary>		    
	</details>

	Закрывающий тег: обязателен.

Атрибуты

open – данный логический атрибут указывает, будет ли дополнительная информация отображаться пользователю при загрузке страницы. Атрибут по умолчанию выключен и значений не принимает.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/details

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>

<!-- Попробуйте добавить атрибут open -->	
<details>
  <summary>А внутри сюрприз.</summary>
  <p>Хех, я просто пошутил.</p>
</details>	
	
</body>
</html>

Пример №1