ToggleEvent

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

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). It is also the event object for the HTMLDetailsElement toggle event, which fires when a <details> element is toggled between open and closed.

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