Теги details и summary

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

Note: Тег details не подходит для сносок. Пожалуйста, обратитесь к разделу примечаний для получения подробностей о том, как помечать сноски.

Тег summary представляет собой резюме, заголовок, или легенда для остального содержания родительского элемента details, если таковой имеется.

Первый дочерний элемент summary тега details, если таковой имеется, представляет собой резюме или легенду о деталях. Если нет дочерних элементов, агент пользователя должен обеспечивать свою легенду (например, «Подробности»).

Остальное содержимое элемента представляет дополнительную информацию или элементы управления.

Атрибут open boolean типа (логический). Если он присутствует, то это означает, что резюме и дополнительная информация должны быть показана пользователю. Если этот атрибут отсутствует, то только резюме и требовалось показать.

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

ПА (броузер) должен позволить пользователю запросить дополнительную информацию которую можно показать или скрыть. На запрос деталей, которые будут показаны, агент пользователя должен установить атрибут open элемента со значением ‘open‘. На запрос скрыть, агент пользователя должен удалить атрибут open элемента.

В следующем примере показано как тег details используется, чтобы скрыть технические детали в докладе:

<section>
 <h1>Copying "Really Achieving Your Childhood Dreams"</h1>
 <details>
 <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
 <dl>
 <dt>Transfer rate:</dt> <dd>452KB/s</dd>
 <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
 <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
 <dt>Duration:</dt> <dd>01:16:27</dd>
 <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
 <dt>Dimensions:</dt> <dd>320?240</dd>
 </dl>
 </details>
</section>

Ниже показано, как тег details может быть использован, чтобы скрыть некоторые элементы управления по умолчанию:

<details>
 <summary><label for=fn>Name & Extension:</label></summary>
 <p><input type=text id=fn name=fn value="Pillar Magazine.pdf">
 <p><label><input type=checkbox name=ext checked> Hide extension</label>
</details>

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

В этих примерах, резюме на самом деле просто суммирует то, что контроль может измениться, а не фактические значения, которые являются далеко не идеальными.

Поскольку атрибут open добавляется и удаляется автоматически, когда пользователь взаимодействует с контролем, он может быть использован в CSS стилях элемента по-разному в зависимости от его состояния. Здесь стиль используется для анимации цвета резюме, если элемент будет открыт или закрыт:

<style>
 details > summary { transition: color 1s; color: black; }
 details[open] > summary { color: red; }
</style>
<details>
 <summary>Automated Status: Operational</summary>
 <p>Velocity: 12m/s</p>
 <p>Direction: North</p>
</details>