1. Web
  2. Web APIs
  3. ToggleEvent

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:

  • 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.
Event ToggleEvent

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

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

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

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