Open In App
Related Articles

HTML | DOM ontoggle Event

Improve Article
Improve
Save Article
Save
Like Article
Like

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

 


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 27 Jul, 2021
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials