Open In App
Related Articles

HTML ontoggle Event Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The ontoggle event is triggered when the user opens or closes the <details> element. The <details> element is used to provide additional information/details that the user can view or hide details according to requirements.

Syntax

<details ontoggle = "script">

Supported Tag

Attribute Value

This attribute contains a single value “script” which works when ontoggle event call.

Example 1: This example illustrates the implementation of the ontoggle Event Attribute with <details> tag.  

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:

am

Example 2: In this example, we will the ontoggle Event Attribute with <details> tag to trigger the event.  

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ontoggle event attribute</title>
    <style>
      body {
        text-align: center;
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
      }
      h1 {
        color: #48e98b;
      }
      h2 {
        color: #38a2e9;
      }
      p {
        color: #6e6e6e;
      }
      summary {
        color: #e74c3c;
        cursor: pointer;
        outline: none;
      }
      details {
        margin: 20px auto;
        width: 60%;
        background-color: #fff;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
 
  <body>
    <h1>GeeksforGeeks</h1>
    <h2>ontoggle event attribute</h2>
    <p>
        Click below to reveal more information
    </p>
    <details ontoggle="alert(
        'The ontoggle event just got triggered')">
      <summary>
        What is the full form of HTML
    </summary>
      <p>
        Hyper Text Markup Language (HTML) is
        the standard markup language for
        creating web pages.
      </p>
    </details>
  </body>
</html>

                    

Output:

as

Supported Browser

  • Google Chrome 12 and above
  • Edge 79 and above
  • Firefox 48 and above
  • Opera 15 and above
  • Safari 6 and above


Last Updated : 11 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads