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.

TheToggleEvent interface represents an event that fires when a popover element is toggled between being shown and hidden.

This is the event object for thebeforetoggle andtoggle events, which fire on elements as follows:

Thebeforetoggle event fires beforepopover or<dialog> elements are shown or hidden.
Thetoggle event fires after popover,<dialog>, or<details> elements are shown or hidden.

Constructor

ToggleEvent(): Creates aToggleEvent object.

Instance properties

This interface inherits properties from its parent,Event.

ToggleEvent.newStateRead only: A string (either"open" or"closed"), representing the state the element is transitioning to.
ToggleEvent.oldStateRead only: A string (either"open" or"closed"), representing the state the element is transitioning from.
ToggleEvent.sourceRead only: AnElement 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");  }});