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 
              [email protected]
            </p>


        </details>

    </center>
    <script>
        document.getElementById(
          "detailsID").addEventListener("toggle", GFGfun);

        function GFGfun() {
            alert("ontoggle");
        }
    </script>

</body>

</html>