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.
* Some parts of this feature may have varying levels of support.
The ToggleEvent interface represents an event that fires when a popover element is toggled between being shown and hidden.
This is the event object for the beforetoggle and toggle events, which fire on elements as follows:
Constructor
ToggleEvent()-
Creates a
ToggleEventobject.
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-
An
Elementobject instance representing the HTML control that initiated the toggle.
Examples
Basic example
js
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");
}
});
Specifications
| Specification |
|---|
| HTML # toggleevent |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ToggleEvent
|
|
|
|
|
|
|
|
|
|
|
|
|
ToggleEvent() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
newState
|
|
|
|
|
|
|
|
|
|
|
|
|
oldState
|
|
|
|
|
|
|
|
|
|
|
|
|
source
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support