<details> Элемент раскрытия сведений HTML

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

На экране виджет раскрытия обычно отображается в виде небольшого треугольника, который поворачивается (или переворачивается), обозначая открытое или закрытое состояние, и расположенной рядом метки. Содержимое элемента <summary> используется в качестве метки виджета раскрытия. Содержимое элемента <details> служит доступным описанием элемента <summary>.

Попробуйте

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

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

Когда пользователь нажимает на виджет или переводит на него фокус, а затем нажимает пробел, он «раскрывается», показывая своё содержимое. Именно поэтому виджеты раскрытия иногда называют «крутящимися»: обычно для обозначения открытия или закрытия используется треугольник, который поворачивается или переворачивается.

Вы можете использовать CSS для стилизации виджета раскрытия и программно открывать и закрывать его, задавая или удаляя атрибут open. К сожалению, в настоящее время встроенного способа анимировать переход между открытым и закрытым состояниями нет.

По умолчанию в закрытом состоянии высоты виджета достаточно только для отображения треугольника раскрытия и сводки. В открытом состоянии он расширяется, показывая содержащиеся в нём подробности.

Реализации, полностью соответствующие стандартам, автоматически применяют CSS display: list-item к элементу <summary>. Вы можете использовать это свойство или псевдоэлемент ::marker, чтобы настроить виджет раскрытия.

Атрибуты

Этот элемент включает глобальные атрибуты.

open

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

Примечание: Чтобы скрыть подробности, необходимо полностью удалить этот атрибут. open="false" делает подробности видимыми, поскольку этот атрибут является логическим.

name

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

Атрибут name задаёт имя группы — присвойте нескольким элементам <details> одинаковое значение name, чтобы объединить их в группу. Одновременно может быть открыт только один из сгруппированных элементов <details> — открытие одного приведёт к закрытию другого. Если нескольким сгруппированным элементам <details> задан атрибут open, открытым будет отображаться только первый из них в порядке исходного кода.

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

События

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

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

details.addEventListener("toggle", (event) => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});

Примеры

Простой пример раскрытия

В этом примере показан простой элемент <details> с элементом <summary>.

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Результат

Создание открытого блока раскрытия

Чтобы блок <details> изначально находился в открытом состоянии, добавьте логический атрибут open:

<details open>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Результат

Несколько именованных блоков раскрытия

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

<details name="requirements">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="requirements">
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
<details name="requirements">
  <summary>Job Requirements</summary>
  <p>
    Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance,
    privacy, security, and internationalization, as well as a dislike of
    broccoli.
  </p>
</details>

Результат

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

Настройка внешнего вида

Теперь применим CSS, чтобы настроить внешний вид блока раскрытия.

CSS

details {
  font:
    16px "Open Sans",
    "Calibri",
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #dddddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #dddddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details:open > summary {
  background-color: #ccccff;
}

Этот CSS создаёт интерфейс, похожий на интерфейс с вкладками, где щелчок по вкладке открывает её и показывает содержимое.

HTML

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Результат

Пример настройки виджета раскрытия см. на странице <summary>.

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• <summary>
• ::details-content