HTML ontoggle Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

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

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 14th October 2023