HTMLElement: toggle event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The toggle event of the HTMLElement interface fires on a popover element (i.e. one that has a valid popover attribute) just after it is shown or hidden.

If the popover element is transitioning from hidden to showing, the event.oldState property will be set to closed and the event.newState property will be set to open.
If the popover element is transitioning from showing to hidden, then event.oldState will be open and event.newState will be closed.

Note: The toggle event behaves differently when fired on <details> elements. In this case, it does not relate to popovers, and instead fires when the open/closed state of a <details> element is toggled. See the HTMLDetailsElement 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) => {};

Event type

A ToggleEvent. Inherits from Event.

Examples

Basic example

const popover = document.getElementById("mypopover");

// ...

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

A note on toggle event coalescing

It is worth pointing out that toggle events are coalesced, meaning that if multiple toggle events are fired before the event loop has a chance to cycle, only a single event will be fired.

For example:

popover.addEventListener("toggle", () => {
  //...
});

popover.showPopover();
popover.hidePopover();
// `toggle` only fires once

Specifications

Specification
HTML Standard # event-toggle

Browser compatibility

BCD tables only load in the browser