HTMLDetailsElement
The HTMLDetailsElement interface provides special properties (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating <details> elements.
Instance properties
Inherits properties from its parent, HTMLElement.
HTMLDetailsElement.name-
A string reflecting the
nameHTML attribute, which allows you to create a group of mutually-exclusive<details>elements. Opening one of the named<details>elements of this group causes other elements of the group to close. HTMLDetailsElement.open-
A boolean value reflecting the
openHTML attribute, indicating whether or not the element's contents (not counting the<summary>) is to be shown to the user.
Instance methods
No specific method; inherits methods from its parent, HTMLElement.
Events
Inherits events from its parent interface, HTMLElement.
Examples
>Log chapters as they are opened and closed
This example uses the HTMLElement toggle event to add and remove chapters from a log aside as they are opened and closed.
HTML
<section id="summaries">
<p>Chapter summaries:</p>
<details id="ch1">
<summary>Chapter I</summary>
Philosophy reproves Boethius for the foolishness of his complaints against
Fortune. Her very nature is caprice.
</details>
<details id="ch2">
<summary>Chapter II</summary>
Philosophy in Fortune's name replies to Boethius' reproaches, and proves
that the gifts of Fortune are hers to give and to take away.
</details>
<details id="ch3">
<summary>Chapter III</summary>
Boethius falls back upon his present sense of misery. Philosophy reminds him
of the brilliancy of his former fortunes.
</details>
</section>
<aside id="log">
<p>Open chapters:</p>
<div data-id="ch1" hidden>I</div>
<div data-id="ch2" hidden>II</div>
<div data-id="ch3" hidden>III</div>
</aside>
CSS
body {
display: flex;
}
#log {
flex-shrink: 0;
padding-left: 3em;
}
#summaries {
flex-grow: 1;
}
JavaScript
function logItem(e) {
console.log(e);
const item = document.querySelector(`[data-id=${e.target.id}]`);
item.toggleAttribute("hidden");
}
const chapters = document.querySelectorAll("details");
chapters.forEach((chapter) => {
chapter.addEventListener("toggle", logItem);
});
Result
Specifications
| Specification |
|---|
| HTML> # htmldetailselement> |
| HTML> # event-toggle> |
Browser compatibility
>api.HTMLDetailsElement
api.HTMLElement.toggle_event.details_elements
See also
- The HTML element implementing this interface:
<details>