HTML | DOM ontoggle Event

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>