HTML | <details> open Attribute

The HTML <details> open attribute is used to indicate whether the details will be display on page load. It is a boolean attribute. If this attribute is present then the detail will be visible.

Syntax:

<details open> Contents... </details>

Example: This example illustrates the use of open attribute in <details> element.

html

<!-- HTML program to illustrate details open Attribute -->

<!DOCTYPE html> 
<html> 
    <head> 
        <title>HTML details open Attribute</title> 
    </head> 
    
    <body> 
        <h1 style="text-align:center;">
            GeeksForGeeks
        </h1>
        
        <h2 style = "color: green; text-align: center;"> 
            HTML &lt;Details&gt;open Attribute 
        </h2> 
        
        <!-- Below details tag has "open" attribute -->
        <details open> 
            <summary>Geeks classes</summary> 
            
            <p> 
                An extensive classroom programme to build 
                and enhance Data Structures and Algorithm 
                concepts. 
            </p> 
        </details> 
    </body> 
</html>

Output:

Supported Browsers: The browser supported by HTML <details> open attribute are listed below:

Google Chrome 12.0
Edge 79.0
Firefox 49.0
Safari 6.0
Opera 15.0

HTML | <details> open Attribute

Explore