<details>

The <details> element represents a disclosure widget from which the user can obtain additional information or controls.

Point

• The details element include a summary element followed by flow content.
• The summary element child of the element, if any, represents the summary or legend of the details.

HTML Attributes

• open = boolean
  If present, it indicates that the details are to be shown to the user. If the attribute is absent, the details are not to be shown. [Example B]

See also global attributes.

Examples

Example A

[try it]:

<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>

Example B

The open attribute is present. [try it]:

<details open="open">
  <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>

HTML Reference

The HTML5 specification defines the <details> element in 4.12.1 The details element.