details
elementsummary
element followed by flow content.open
interface HTMLDetailsElement : HTMLElement { attribute boolean open; };
The details
element represents
a disclosure widget from which the user can obtain additional
information or controls.
The details
element is not appropriate for
footnotes. Please see the
section on footnotes for details on how to mark up
footnotes.
The summary
element child of the element, if
any, represents
the summary or legend of the details.
The rest of the element's contents represents the additional information or controls.
The open
content attribute is a
boolean attribute. If present, it
indicates that both the summary and the additional information is
to be shown to the user. If the attribute is absent, only the
summary is to be shown.
The following example shows the details
element being used to hide
technical details in a progress report.
<section class="progress window"> <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>
The following shows how a details
element can be used to hide some
controls by default:
<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>
One could use this in conjunction with other details
in a list to allow the user to
collapse a set of fields down to a small set of headings, with the
ability to open each one.
In these examples, the summary really just summarises what the controls can change, and not the actual values, which is less than ideal.
Because the open
attribute is added and removed
automatically as the user interacts with the control, it can be
used in CSS to style the element differently based on its state.
Here, a stylesheet is used to animate the color of the summary when
the element is opened or closed:
<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>