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
<!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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 14th October 2023