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.


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

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

ontoggle = (event) => {};

Event type

A generic Event.


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


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


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

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

#summaries {
  flex-grow: 1;


function logItem(e) {
  const item = document.querySelector(`[data-id=${}]`);

const chapters = document.querySelectorAll("details");
chapters.forEach((chapter) => {
  chapter.addEventListener("toggle", logItem);



HTML Standard
# event-toggle

Browser compatibility

BCD tables only load in the browser