An id on a <details> tag assigns an identifier to the element.
The identifier must be unique across the page.
A unique id attribute on a <details> element.
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>
The id attribute assigns an identifier to the <details> element.
The id allows JavaScript to easily access the <details> element.
It is also used to point to a specific id selector in a style sheet.
Tip: id is a global attribute that can be applied to any HTML element.
<details id="identifier" >
| 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 (.). |
A <details> tag with a unique id.
Click the button to toggle the open attribute.
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>
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.
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 |
Back to <details>
