The ToggleEvent interface represents an event notifying the user when a popover element's state toggles between showing and hidden.
It is the event object for the HTMLElementbeforetoggle and toggle events, which fire on popovers when they transition between showing and hidden (before and after, respectively).
Note:ToggleEvent is unrelated to the HTMLDetailsElementtoggle event, which fires on a <details> element when its open/closed state is toggled. Its event object is a generic Event.
A string (either "open" or "closed"), representing the state the element is transitioning from.
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");}});