Skip to content
Related Articles

Related Articles

Improve Article

HTML | ontoggle Event Attribute

  • Difficulty Level : Basic
  • Last Updated : 03 Aug, 2021

The ontoggle event is triggered when the user open or close the <details> element. The <details> element is used to provide additional information/details that user can view or hide details according to requirement.
Supported Tags:

  • <details>

Syntax: 
 

<details ontoggle = "script">

Attribute Value: This attribute contains single value script which works when ontoggle event call.
Note: This Attribute works with details tag.
Example: 
 

html




<!DOCTYPE html >
<html>
    <head>
        <title>ontoggle event attribute</title>
        <style>
            body {
                text-align:center;
            }
            h1 {
                color:green;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>ontoggle event attribute</h2>
         
<p>Click below to open the details.</p>
 
        <details ontoggle="Geeks()">
            <summary style="color:blue";>What is the full
            form of HTML</summary>
             
<p>Hyper Text Markup Language</p>
 
        </details>
        <script>
            function Geeks() {
            alert("The ontoggle event triggered");
            }
        </script>
    </body>
</html>                       

Output: 
 

Toggle Attribute



Supported Browser: The browser supported by ontoggle event attribute are listed below: 
 

  • Google Chrome 12.0
  • Opera 15.0
  • Firefox 48.0
  • Safari 6.0

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :