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>