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