Skip to content
Related Articles

Related Articles

HTML | DOM ontoggle Event

Improve Article
Save Article
Like Article
  • Last Updated : 27 Jul, 2021

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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!