Элемент details

Последнее обновление: 14.07.2021

Элемент details позволяет создавать раскрываемый блок, который по умолчанию скрыт. Иногда такой элемент еще называют accordion.

Данный элемент содержит элемент summary, который представляет заголовок для блока, и этот заголовок отображается в скрытом режиме. Например:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент details в HTML5</title>
	</head>
	<body>
		<details>
			<summary>Флагманы 2015</summary>
			<ul>
				<li>iPhone 6S Plus</li>
				<li>Nexus 6P</li>
				<li>Galaxy S6 Edge</li>
				<li>Lumia 950 XL</li>
			</ul>
		</details>
	</body>
</html>

По умолчанию мы видим только заголовок summary:

Элемент summary в HTML5

Нажав на стрелку или заголовок, мы можем раскрыть блок:

Элемент details в HTML5

Дополнительно про данный элемент можно прочитать в статье Стилизация элемента details

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850