HTML <Details> Tag

Definition

The <details> tag creates a disclosure widget, that if clicked to an ‘open’ state, will show additional information. A summary or label can be specified with a <summary> element.

Example

<details>
    <summary>Label</summary>
    Insert your additional information here.
</details>

Usage

• The <details> element takes one <summary> element, followed by normal flow content.
• Both the opening and closing tag are required.
• If you fail to include a <summary> child element the browser will provide it’s own legend. In English this would be “Details”. For example:

  <details>
  Insert your additional information here.
  </details>

  Insert your additional information here.
  Try it Yourself

Attributes

The <details> element supports the Global Attributes, as well as the following:

• open

  The open attribute is a boolean attribute, which if present indicates that both the summary and detail information should be shown to the user. An example is as follows:

  <details open>
    <summary>Detail</summary>
    Text summary describing more about the detail.
  </details>

  Detail

  Text summary describing more about the detail.

Events

The <details> element supports the Global events, as well as the following:

• toggle

  The toggle event can be used to detect when the widget changes state:

  details.addEventListener("toggle", event => {
  if (details.open) {
    /* the element is toggled open */
  } else {
    /* the element is toggled closed */
  }
  });

Best Practices

• The open attribute is added and removed automatically depending on the state of the element. As such, it can be targeted by CSS and styled depending on it’s state. For example:

  <style>
  details[open] > summary { color: green; }
  </style>
  <details>
  <summary>Server status</summary>
  <p>All servers are operating normally.</p>
  </details>

  Try it Yourself

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile