References

Beginner-friendly references for web development, with live, editable examples.

The HTML onbeforetoggle event

Event All modern browsers Updated
Quick answer

The HTML onbeforetoggle attribute runs JavaScript when a popover or

is about to open or close. It is an inline handler for the beforetoggle event; in modern code prefer addEventListener('beforetoggle', …).

Overview

The onbeforetoggle event attribute runs JavaScript just before a popover or

toggles. In JavaScript the event itself is named beforetoggle — drop the on prefix when you call addEventListener.

It relates to native disclosure and dialog widgets — the <dialog> element, <details>, and popovers — letting you react when they open, close or are dismissed without wiring up the behavior yourself.

You can wire this up with the inline onbeforetoggle HTML attribute, but the modern, recommended approach is element.addEventListener('beforetoggle', handler) in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.

Syntax

<element onbeforetoggle="handler()">…</element>

element.addEventListener('beforetoggle', handler);

Best practices

  • Prefer element.addEventListener('beforetoggle', handler) over the inline onbeforetoggle attribute — it separates behavior from markup and allows multiple handlers.
  • Prefer the native <dialog>, <details> and popover APIs that fire these events over hand-built widgets.
  • Use the event to sync state — for example to lazy-load content when a panel opens.
  • Keep these widgets accessible: manage focus and provide an accessible name.

Frequently asked questions

What is the onbeforetoggle event?
It runs JavaScript just before a popover or
toggles. In JavaScript the event is named beforetoggle.
Which elements fire this event?
Native disclosure and dialog widgets — <dialog>, <details> and popovers.
How do I react when a details element opens?
Listen for the toggle event and check the element's open property.
Should I use the onbeforetoggle attribute or addEventListener?
Prefer addEventListener('beforetoggle', …) in JavaScript. The inline onbeforetoggle attribute works but mixes behavior into the markup and allows only one handler per element.
onbeforeprint onbeforeunload