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 an Element's state has changed.

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). It is also the event object for the HTMLDetailsElement toggle event, which fires when a <details> element is toggled between open and closed.

Event ToggleEvent

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

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

Browser compatibility

BCD tables only load in the browser

See also