Thebeforetoggle event of theHTMLElement interface fires on apopover or<dialog> element just before it is shown or hidden.

• If the element is transitioning from hidden to showing, theevent.oldState property will be set toclosed and theevent.newState property will be set toopen.
• If the element is transitioning from showing to hidden, thenevent.oldState will beopen andevent.newState will beclosed.

This event iscancelable when an element is toggled to open ("show") but not when the element is closing.

Among other things, this event can be used to:

• prevent an element from being shown.
• add or remove classes or properties from the element or associated elements, for example to control the animation behavior of a dialog as it is opened and closed.
• clear the state of the element before it is opened or after it is hidden, for example to reset a dialog form and return value to an empty state, or hide any nested manual popovers when reopening a popup.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("beforetoggle", (event) => { })onbeforetoggle = (event) => { }

Event type

AToggleEvent. Inherits fromEvent.

Examples

The examples below demonstrates how thebeforetoggle event might be used for apopover or<dialog> element.The same examples would work similarly on the other element types.

Basic example

This example shows how to listen for thebeforetoggle event and log the result.

HTML

The HTML consists of a popover and a button for toggling it open and closed.

<button popovertarget="mypopover">Toggle the popover</button><div popover>Popover content</div>

<pre></pre>

#log {  height: 150px;  overflow: scroll;  padding: 0.5rem;  border: 1px solid black;}

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

JavaScript

The code gets adds an event listener for thebeforetoggle event and logs the state.

const popover = document.getElementById("mypopover");popover.addEventListener("beforetoggle", (event) => {  if (event.newState === "open") {    log("Popover is about to be shown");  } else {    log("Popover is about to be hidden");  }});

Result

Prevent a popover opening

Thebeforetoggle event is cancelable if fired when opening an element.

Below we show how a popover that might first check if it is allowed to open, and if not, callEvent.preventDefault() to cancel the event.In this example we use a button to set whether the popover can open or not: in a more "full featured" example this might depend on the application state, or the data in the popover being ready to display.

HTML

The HTML consists of a popover, a button for toggling it open and closed, and a button for setting whether the button can be opened.

<button popovertarget="mypopover">Toggle the popover</button><label for="allow-popover">  Allow opening <input type="checkbox" checked /></label><div popover>Popover content</div>

<pre></pre>

#log {  height: 150px;  overflow: scroll;  padding: 0.5rem;  border: 1px solid black;}

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

JavaScript

First we set up the code to simulate a state where we don't want to allow the popover to open.This is represented by the variableallowOpen, which is toggled when the associated checkbox is toggled.

const allowCheckbox = document.getElementById("allow-popover");let allowOpen = true;allowCheckbox.addEventListener("change", (event) => {  allowOpen = allowCheckbox.checked;});

The code gets adds an event listener for thebeforetoggle event.IfallowOpen is false thenpreventDefault() is called, which stops the popup from opening.

const popover = document.getElementById("mypopover");popover.addEventListener("beforetoggle", (event) => {  if (event.newState === "open") {    if (allowOpen) {      log("Popover is about to be shown");    } else {      log("Popover opening prevented");      event.preventDefault();    }  } else {    log("Popover is about to be hidden");  }});

Result

A note on beforetoggle event coalescing

If multiplebeforetoggle events are fired before the event loop has a chance to cycle, only a single event will be fired.This is referred to as "event coalescing".

For example:

popover.addEventListener("beforetoggle", () => {  // …});popover.showPopover();popover.hidePopover();// `beforetoggle` only fires once

Other examples

• Opening a modal dialog example inHTMLDialogElement

Specifications

Browser compatibility

See also

• popover HTML global attribute
• Popover API
• Related event:toggle