HTML ontoggle Attribute: This attribute is defined as it fires when the user opens or closes the <details> element. The <details> element specifies additional details that the user can view or hide on demand. It was not supported in HTML4. As it was newly added to HTML5.
HTML ontoggle Attribute
This attribute can be applied to the <details> element.
Attribute Value
This attribute contains a single value script which works when ontoggle event call.
Syntax: <details ontoggle = “script”>
Browser Support:
This attribute is supported by the following browsers:
- Chrome-12.0
- Firefox-does not support
- Internet Explorer-does not support
- Safari-6.0
- Opera-15.0
Example: for executing a JavaScript when an <details> element is opened or closed
<!DOCTYPE html >
<html>
<head>
<title>ontoggle event attribute</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h1>Freshersnow</h1>
<h2>ontoggle event attribute</h2>
<p>Click below to open the details.</p>
<details ontoggle="Geeks()">
<summary style="color:blue";>What is the full form of HTML</summary>
<p>Hyper Text Markup Language</p> </details>
<script>
function Freshersnow() {
alert("The ontoggle event triggered");
}
</script>
</body>
</html>
Output:
