Тег <details> HTML

  • Предыдущая страница <del>
  • Следующая страница <dfn>

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

<details> Элемент определяет другие详细信息, которые пользователь может открывать и закрывать по своему усмотрению.

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

Любой тип содержимого можно поместить в <details> в теге.

Совет:<summary> тег с <details> В сочетании с другими элементами, можно определить видимый заголовок для详细信息. При нажатии на заголовок будет отображаться: <details> Определенное содержимое.

См. также:

Руководство по HTML DOM:Объект Details

Пример

Пример 1

Определение详细信息, которые пользователь может открывать и закрывать по своему усмотрению:

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

Попробуйте сами

Пример 2

Использование 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 Center)</summary>
  <p>Epcot - это тематический парк в Disney World Resort, который предлагает захватывающие достопримечательности, международные павильоны, награжденные призами фейерверки и сезонные мероприятия.</p>
</details>
</body>
</html>

Попробуйте сами

Свойство

Свойство Значение Описание
open open Определяет, должна ли информация быть видимой для пользователя (открыта).

Глобальные свойства

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

свойства событий

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

Стандартные CSS настройки

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

details {
  display: block;
}

Поддержка браузерами

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0
  • Предыдущая страница <del>
  • Следующая страница <dfn>