ontoggle
The ontoggle event in HTML is triggered when a <details> element is opened or closed, allowing scripts to respond to changes in visibility.
ontoggle event
The ontoggle event handler executes a script when the state of a <details> element is switched between open and closed. It is commonly used to manage visibility changes for expandable content.
Syntax
In HTML
index.html
<element ontoggle="myScript">
In JS
script.js
object.ontoggle = myScript;
In JavaScript, the addEventListener() function is used.
script.js
object.addEventListener("toggle", myScript);
Example
::event-ontoggle
::
index.html
<!DOCTYPE html>
<html>
<body>
<p>Open the details.</p>
<details ontoggle="myFunction()">
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<script>
function myFunction() {
alert("The ontoggle event occured");
}
</script>
</body>
</html>
Values
Conclusion
The ontoggle event in HTML provides a convenient way to react to the opening or closing of <details> elements, enhancing the interactivity of web pages. By leveraging this event, developers can create dynamic content that responds to user actions, such as revealing or hiding additional information. This can be particularly useful for menus, FAQs, and any content that benefits from a collapsible structure.