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.


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