HTMLDetailsElement: toggle event

The toggle event fires when the open/closed state of a <details> element is toggled.

This event is not cancelable and does not bubble.

Note: The toggle event is also available in a different form on HTMLElement; this version fires on popover elements just after they are shown or hidden. See the HTMLElement toggle event page for more information.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("toggle", (event) => {});

ontoggle = (event) => {};

html

<details ontoggle="console.log(this.open)" open>...</details>

Note: In the example above the event listener will be called once without any user interaction because the open attribute is set. Using event handlers like this is discouraged.

Event type

A ToggleEvent. Inherits from Event.

Examples

This example logs chapters that are open. Chapters are removed from the log when they are closed.

HTML

html

<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>
<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>

CSS

css

body {
  display: flex;
  flex-direction: row-reverse;
}

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

#summaries {
  flex-grow: 1;
}

JavaScript

function logItem(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 Standard # event-toggle

Browser compatibility

BCD tables only load in the browser