ToggleEvent

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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).

Event ToggleEvent

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() Experimental

Creates an ToggleEvent object.

Instance properties

This interface inherits properties from its parent, Event.

ToggleEvent.newState Read only Experimental

A string (either "open" or "closed"), representing the state the element is transitioning to.

ToggleEvent.oldState Read only Experimental

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

See also