ToggleEvent

The ToggleEvent interface represents an event notifying the user an Element's state has changed.

This is the event object for the HTMLElement beforetoggle and toggle events, which fire on some elements just before and just after they transition between showing and hidden, respectively.

• beforetoggle fires on popovers and <dialog> elements
• toggle fires on popovers, <dialog> elements, and <details> elements

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