HTML/Elements/details

From Web Education Community Group
< HTML‎ | Elements
Jump to: navigation, search

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

Details01.png

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>

Details02.png

HTML Reference

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