.png)
HTML | DOM ontoggle Event
The ontoggle event in HTML DOM occurs when the <details> element user opens or closes by the user. The <details> tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it.
Supported tags
<details>
Syntax:
- In HTML:
<element ontoggle="Script">
- In JavaScript:
object.ontoggle = function(){Script};- In JavaScript, using the addEventListener() method:
object.addEventListener("toggle", Script);Example:
html
<!DOCTYPE html><html><head> <title>HTML DOM ontoggle Event</title></head><body> <center> <h1 style="color:green">GeeksforGeeks</h1> <h2>HTML DOM ontoggle Event</h2> <details id="detailsID"> <summary>Show details</summary> <p> 5th Floor, A-118, Sector-136, Noida, Uttar Pradesh - 201305 feedback@geeksforgeeks.org </p> </details> </center> <script> document.getElementById( "detailsID").addEventListener("toggle", GFGfun); function GFGfun() { alert("ontoggle"); } </script></body></html> |
Output:
Before:
After:
Supported Browsers: The browsers supported by DOM ontoggle Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
.png)
