<details>: Элемент раскрытия информации

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

Элемент раскрытия информации обычно отображается на экране с помощью маленького треугольника, который вращается (или поворачивается), чтобы указать состояние «открыто/закрыто», с подписью рядом с треугольником. Содержимое элемента <summary> используется в качестве подписи для элемента раскрытия информации. Содержимое элемента <details> предоставляет доступное описание для элемента <summary>.

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

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

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

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

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

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

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>

Результат

Чтобы открыть элемент раскрытия по умолчанию, добавьте булевый атрибут 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 name="reqs">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="reqs">
  <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="reqs">
  <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: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

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

details[open] > summary {
  background-color: #ccf;
}

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

Селектор details[open] может использоваться для стилизации открытого элемента.

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> поддерживает сокращённую запись свойства list-style и его свойства в развернутом виде, например, list-style-type, для изменения значка раскрытия на любой другой (обычно с помощью list-style-image). Например, мы можем удалить значок раскрытия, установив list-style: none.

CSS

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

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

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

Этот 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>