ToggleEvent

Baseline 2024

Newly available

Since April 2024, 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 when a popover element's state toggles between showing and hidden.

It is the event object for the HTMLElement beforetoggle and toggle events, which fire on popovers when they transition between showing and hidden (before and after, respectively).

Note: ToggleEvent is unrelated to the HTMLDetailsElement toggle event, which fires on a <details> element when its open/closed state is toggled. Its event object is a generic Event.

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.

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 Standard # toggleevent

Browser compatibility

BCD tables only load in the browser