Syntax

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

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

Examples

The examples below demonstrate how the beforetoggle event might be used for a popover element. The same examples would work similarly on a <dialog> element.

Basic example

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

HTML

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

html

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

<pre id="log"></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 adds an event listener for the beforetoggle 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

The beforetoggle event is cancelable if fired when opening an element.

Below we show how a popover might first check if it is allowed to open, and if not, call Event.preventDefault() to cancel the event. In this example we use a checkbox 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 checkbox for setting whether the popover can be opened.

html

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

<pre id="log"></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 want to allow the popover to open. This is represented by the variable allowOpen, 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 adds an event listener for the beforetoggle event. If allowOpen is false then preventDefault() 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

Other examples

Opening a modal dialog example in HTMLDialogElement

Specifications

Specification
HTML # event-beforetoggle

Browser compatibility

Help improve MDN

Yes No

Learn how to contribute

This page was last modified on Mar 23, 2026 by MDN contributors.

Syntax

Event type

Examples

Basic example

HTML

JavaScript

Result

Prevent a popover opening

HTML

JavaScript

Result

Other examples

Specifications

Browser compatibility

See also

Help improve MDN