HTML onbeforetoggle Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The onbeforetoggle event attribute is used to execute JavaScript code just before a <details> element is toggled - that is, before it is opened or closed. This event occurs when a user clicks the <summary> element inside a <details> element, or when the toggle state is changed programmatically.

It gives developers a chance to intercept the toggle action, validate conditions, or even prevent the toggle from happening by calling event.preventDefault().

Where It Can Be Used

Can only be applied to the <details> HTML element.
Example of <details> usage:

<details onbeforetoggle="checkPermission(event)">
  <summary>More info</summary>
  <p>This content is hidden until toggled.</p>
</details>

Event Object

The onbeforetoggle event handler receives an event object with several properties:

event.target → references the <details> element being toggled.
event.defaultPrevented → indicates if preventDefault() was called.
event.preventDefault() → method to stop the toggle from occurring.

The event is cancelable, meaning you can prevent the default behavior (opening or closing the <details> element).

Behavior

Fires before the <details> element toggles.
If event.preventDefault() is called inside the handler, the toggle is canceled.
After the toggle, the ontoggle event fires (so onbeforetoggle comes first).

Example: Basic Usage

<details id="details1" onbeforetoggle="beforeToggleHandler(event)">
  <summary>Show More</summary>
  <p>Hidden content goes here.</p>
</details>

<script>
function beforeToggleHandler(event) {
    // Check if user is allowed to toggle
    const allowed = confirm("Do you want to toggle this details element?");
    if (!allowed) {
        event.preventDefault(); // Stops the toggle
        alert("Toggle prevented!");
    } else {
        console.log("Toggle allowed");
    }
}
</script>

What happens here:

When the user clicks the <summary>, the onbeforetoggle handler runs.
A confirmation dialog appears.
If the user cancels, event.preventDefault() stops the <details> from opening/closing.

Key Notes

Browser support: Most modern browsers support onbeforetoggle, but older browsers may not.
Cancelable event: onbeforetoggle is the only <details> related event that can prevent the toggle.
Sequence of events:
1. onbeforetoggle → fires before toggle, cancelable
2. <details> toggles (if not canceled)
3. ontoggle → fires after toggle, not cancelable

Use Cases

Asking user confirmation before expanding/collapsing sensitive information.
Preventing toggle under certain conditions (e.g., insufficient permissions, unsaved changes).
Logging or analytics: track when users attempt to interact with collapsible content.

Syntax

<element onbeforetoggle="script(event)">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>onbeforetoggle in iframe</title>

<style>

  body {

    font-family: Arial, sans-serif;

    padding: 10px;

  }

  details {

    margin-bottom: 15px;

    padding: 10px;

    border: 1px solid #999;

    border-radius: 4px;

  }

  summary {

    font-weight: bold;

    cursor: pointer;

  }

  p {

    margin: 8px 0 0 0;

  }

</style>

</head>

<body>



<h3>Iframe: onbeforetoggle Demo</h3>



<details id="iframeDetails"

         onbeforetoggle="beforeToggle(event)"

         ontoggle="afterToggle(event)">

  <summary>Click to expand</summary>

  <p>This is hidden content inside an iframe.</p>

</details>



<script>

function beforeToggle(event) {

    console.log("onbeforetoggle fired inside iframe");

    const confirmToggle = confirm("Do you want to toggle this details element?");

    if (!confirmToggle) {

        event.preventDefault();

        alert("Toggle prevented!");

    }

}



function afterToggle(event) {

    console.log("ontoggle fired inside iframe");

    const details = event.target;

    alert(details.open ? "Details is now OPEN" : "Details is now CLOSED");

}

</script>



</body>

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML onbeforetoggle event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.