Syntax

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

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

Event type

A ToggleEvent. Inherits from Event.

Examples

The example code below demonstrates how the toggle event might be used for popover. The same code is might be used for a <dialog> or <details> elements in the same way.

Basic example

This example shows how to listen for the toggle event and log the result.

HTML

The HTML consists of a popover and a button for toggling it open and closed.

html

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

<pre id="log"></pre>

#log {
  height: 150px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

The code adds an event listener for the toggle event and logs the state.

const popover = document.getElementById("mypopover");
popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    log("Popover has been shown");
  } else {
    log("Popover has been hidden");
  }
});

Result

A note on toggle event coalescing

If multiple toggle events are fired before the event loop has a chance to cycle, only a single event will be fired. This is referred to as "event coalescing".

For example:

popover.addEventListener("toggle", () => {
  // …
});
popover.showPopover();
popover.hidePopover();
// `toggle` only fires once

Other examples

Opening a modal dialog example in HTMLDialogElement

Specifications

Specification
HTML # event-toggle

Browser compatibility

Help improve MDN

Yes No

Learn how to contribute

This page was last modified on Jan 26, 2026 by MDN contributors.