HTML ontoggle Event Attribute


The ontoggle HTML event attribute is fired when the user opens or closes a <details> element. The <details> element is used to provide additional information or details that the user can view or hide on demand.

To use the ontoggle event attribute, simply add it to the <details> element that you want to monitor. The value of the ontoggle attribute should be a JavaScript function that will be executed when the <details> element is opened or closed.

Here is an example of how to use the ontoggle event attribute:

<details ontoggle="myFunction()">
  <summary>Open the details</summary>
  <p>This is some additional information.</p>
function myFunction() {
  console.log("The ontoggle event occurred!");

When the user clicks on the <summary> element to open the <details> element, the myFunction() function will be executed. Similarly, when the user clicks on the <details> element to close it, the myFunction() function will also be executed.

The ontoggle event attribute can be used to implement a variety of different features, such as:

  • Accordion menus
  • Tabs
  • Spoilers
  • Interactive tutorials
  • And much more!


<details ontoggle="script">


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


<!DOCTYPE html > 
<title>ontoggle event</title>
<h2>ontoggle event attribute</h2>
<p>Click below to open the details.</p>
<details ontoggle="test()">
<summary style="color:blue;">What is the full form of HTML</summary>
<p>Hyper Text Markup Language</p>
function test() {
alert("EXAMPLE: The ontoggle event triggered");

Browser Support

The following table will show you the current browser support for the HTML ontoggle Event Attribute.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 14th October 2023