HTMLDetailsElement

TheHTMLDetailsElement interface provides special properties (beyond the regularHTMLElement 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 thename HTML 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 theopen HTML 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 theHTMLElementtoggle event to add and remove chapters from a log aside as they are opened and closed.

HTML

html

<section>  <p>Chapter summaries:</p>  <details>    <summary>Chapter I</summary>    Philosophy reproves Boethius for the foolishness of his complaints against    Fortune. Her very nature is caprice.  </details>  <details>    <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>    <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>  <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

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);});