HTML <details> id Attribute

The id attribute on a <details> tag assigns an identifier to the details disclosure element. The identifier must be unique across the page.

Example

#

A unique id attribute on a <details> element.

Van Gogh's Paintings

Sunflowers

Starry Night

Self Portrait

<details id="vangogh-paintings">
  <summary>Van Gogh's Paintings</summary>
  <p>Sunflowers</p>
  <p>Starry Night</p>
  <p>Self Portrait</p>
</details>

Using id

The id attribute assigns an identifier to the <details> element.

The identifier must be unique across the page.

The id allows programmatic access to the <details> element.

Tip:  id is a global attribute that can be applied to any HTML element.


Syntax

<details id="identifier" >

Values

#

Value Description
identifier A unique alphanumeric string. The id value must begin with a letter ([aside-Zaside-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.).

More Examples

A <details> tag with a unique id.
Click the button to toggle the open attribute.

Van Gogh's Paintings

Sunflowers

Starry Night

Self Portrait


<details id="mydetails">
  <summary>Van Gogh's Paintings</summary>
  <p>Sunflowers</p>
  <p>Starry Night</p>
  <p>Self Portrait</p>
</details><br />
  
<button onclick="toggle();">Toggle content</button>

<script>
  let toggle = () => {
    let element = document.getElementById("mydetails");
    element.toggleAttribute("open");
  }
</script>

Code explanation

The id attribute assigns a unique identifier for the <details> tag.

Clicking the button calls JavaScript which locates the element using the id.

It then toggles the open attribute on the details element.


Browser support

Here is when id support started for each browser:

Chrome
12.0 Jun 2011
Firefox
49.0 Sep 2016
IE/Edge
Not supported
Opera
15.0 Jul 2015
Safari
6.0 Jul 2012

You may also like

 Back to <details>
Guides