From Web Education Community Group

Contents 1 <details> 1.1 Point 1.2 HTML Attributes 1.3 Examples 1.3.1 Example A 1.3.2 Example B 1.4 HTML Reference

<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>
  <p><label><input type="checkbox" name="ext" checked="checked" /> Hide extension</label></p>
</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>
  <p><label><input type="checkbox" name="ext" checked="checked" /> Hide extension</label></p>
</details>

HTML Reference

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