HTMLElement: beforetoggle event

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

If the popover 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 is transitioning from showing to hidden, then event.oldState will be open and event.newState will be closed.

Syntax

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

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

onbeforetoggle = (event) => {};

Event type

A ToggleEvent. Inherits from Event.

Examples

Basic example

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

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});

A note on toggle event coalescing

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

For example:

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

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

Specifications

Specification
HTML Standard # event-beforetoggle

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`beforetoggle_event`	114	114	114	No	100	17	114	114	No	No	17	No

Docs

Docs4dev

Title here