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 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:

The beforetoggle event fires before popover or <dialog> elements are shown or hidden.
The toggle event fires after popover, <dialog>, or <details> elements are shown or hidden.

Constructor

ToggleEvent(): Creates a 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");
  }
});

Specifications

Specification
HTML # toggleevent

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Jan 1, 1970⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content