ToggleEvent: newState property

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
Report feedback

The newState read-only property of the ToggleEvent interface is a string representing the state the element is transitioning to.

Value

A string. Possible values are "open" (the popover is being shown) or "closed" (the popover is being hidden).

Examples

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");
  }
});