ToggleEvent: ToggleEvent() constructor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2023.

Learn more
See full compatibility

The ToggleEvent() constructor creates a new ToggleEvent object.

Syntax

new ToggleEvent(type, init)

Parameters

type

A string representing the type of event. In the case of ToggleEvent this is always beforetoggle or toggle.

init Optional

An object containing the following properties:

newState Optional: A string representing the state the element is transitioning to. Can be any value, but events fired by the browser set this to "open" or "closed". Defaults to "".
oldState Optional: A string representing the state the element is transitioning from. Can be any value, but events fired by the browser set this to "open" or "closed". Defaults to "".
source Optional: An Element representing the HTML popover control element that initiated the toggle. Defaults to null.

Examples

A developer would not use this constructor manually. A new ToggleEvent object is constructed when a handler is invoked as a result of a relevant event firing.

For example:

const popover = document.getElementById("mypopover");

// …

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
    if (event.source) {
      console.log("Initiated by:", event.source);
    }
  } else {
    console.log("Popover is being hidden");
  }
});