САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Тег <details>



Пример

Укажите сведения, которые пользователь может открывать и закрывать по требованию:

<details>
  <summary>Центр Epcot</summary>
  <p>Epcot - это тематический парк на курорте Walt Disney World Resort с захватывающими достопримечательностями, международные павильоны, отмеченные наградами фейерверки и сезонные специальные мероприятия.</p>
</details>
Попробуйте сами »

Определение и использование

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

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

Любой вид контента может быть помещен внутрь тега <details>.

Совет: Тег <summary> используется в сочетании с <details> для указания видимого заголовка для деталей.


Поддержка браузеров

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает данный элемент.

Элемент
<details> 12.0 79.0 49.0 6.0 15.0

Атрибуты

Атрибут Значение Описание
open open Указывает, что сведения должны быть видны (открыты) пользователю

Глобальные атрибуты

Тег <details> также поддерживает Глобальные атрибуты в HTML.


События атрибутов

Тег <details> также поддерживает События атрибутов в HTML.



Еще примеры

Пример

Используйте CSS для стилизации <details> и <summary>:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>

<details>
  <summary>Центр Epcot</summary>
  <p>Epcot - это тематический парк на курорте Walt Disney World Resort с захватывающими достопримечательностями, международные павильоны, отмеченные наградами фейерверки и сезонные специальные мероприятия.</p>
</details>

</body>
</html>
Попробуйте сами »

Связные страницы

HTML DOM reference: Объект details


Настройки CSS по умолчанию

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

details {
  display: block;
}