ToggleEvent

Baseline 2023

Newly available

Since ⁨November 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The ToggleEvent interface represents an event notifying the user an Element's state has changed.

This is the event object for the HTMLElement beforetoggle and toggle events, which fire on some elements just before and just after they transition between showing and hidden, respectively.

beforetoggle fires on popovers and <dialog> elements.
toggle fires on popovers, <dialog> elements, and <details> elements.

Constructor

ToggleEvent(): Creates an ToggleEvent object.

Instance properties

This interface inherits properties from its parent, Event.

ToggleEvent.newState Read only: A string (either "open" or "closed"), representing the state the element is transitioning to.
ToggleEvent.oldState Read only: A string (either "open" or "closed"), representing the state the element is transitioning from.
ToggleEvent.source Read only: An Element object instance representing the HTML control that initiated the toggle.

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");
 }
});