HTML / HTML Tags

HTML <Details> Tag

Oct 12, 2022
2 min read
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>
Label Insert your additional information here.

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.

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>

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesNoYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes