HTMLDetailsElement

The HTMLDetailsElement interface provides special properties (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating <details> elements.

EventTarget Node Element HTMLElement HTMLDetailsElement

Instance properties

Inherits properties from its parent, HTMLElement.

HTMLDetailsElement.name

A string reflecting the name 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 the open 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 the HTMLElement toggle event to add and remove chapters from a log aside as they are opened and closed.

HTML

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

css
body {
  display: flex;
}

#log {
  flex-shrink: 0;
  padding-left: 3em;
}

#summaries {
  flex-grow: 1;
}

JavaScript

js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLDetailsElement
name
open

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

api.HTMLElement.toggle_event.details_elements

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
toggle event fires at details elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also

  • The HTML element implementing this interface: <details>