ContextQMD
Back to Content

ToggleEvent

files/en-us/web/api/toggleevent/index.md

latest1.9 KB
Original Source

{{APIRef("Popover API")}}

The ToggleEvent interface represents an event that fires when a popover element is toggled between being shown and hidden.

This is the event object for the {{domxref("HTMLElement.beforetoggle_event", "beforetoggle")}} and {{domxref("HTMLElement.toggle_event", "toggle")}} events, which fire on elements as follows:

  • The beforetoggle event fires before popover or {{htmlelement("dialog")}} elements are shown or hidden.
  • The toggle event fires after popover, <dialog>, or {{htmlelement("details")}} elements are shown or hidden.

{{InheritanceDiagram}}

Constructor

  • {{DOMxRef("ToggleEvent.ToggleEvent", "ToggleEvent()")}}
    • : Creates a ToggleEvent object.

Instance properties

This interface inherits properties from its parent, {{DOMxRef("Event")}}.

  • {{DOMxRef("ToggleEvent.newState")}} {{ReadOnlyInline}}
    • : A string (either "open" or "closed"), representing the state the element is transitioning to.
  • {{DOMxRef("ToggleEvent.oldState")}} {{ReadOnlyInline}}
    • : A string (either "open" or "closed"), representing the state the element is transitioning from.
  • {{DOMxRef("ToggleEvent.source")}} {{ReadOnlyInline}}
    • : An {{domxref("Element")}} object instance representing the HTML control that initiated the toggle.

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also