HTML ontoggle Event Attribute

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>