HTML ontoggle Event Attribute

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

ontoggle

HTML Event AttributeThis event attribute is supported by all modern browsers.

Updated 14th October 2023

Description

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>
</details>

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!

Syntax

<details ontoggle="script">

Values

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

Example

HTML

<!DOCTYPE html > 

<html> 

  <head> 

    <title>ontoggle event</title> 

  </head> 

  <body>  

  <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> 

  </details> 

<script> 

function test() { 

  alert("EXAMPLE: The ontoggle event triggered"); 

} 

</script> 

  </body> 

</html>

Result

Open in editor

Browser Support

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

This event attribute is supported by all modern browsers.