☰

The <details> component speaks to a revelation gadget from which the client can get extra data or controls.

<details> .... </details>

Basically, we can utilize details to make an accordion-like gadget that the client can flip open and shut. Inside <details>, we can put any kind of data we need.

There are two pertinent components here: <details> and, alternatively, <summary>. <details> is the wrapper for all the substance we need to show and cover up, and <summary> holds the — well, the <summary> and title of the segment. Actually we needn't bother with the <summary>. In the event that nonattendant, the program will utilize some default content.

The substance of a <details> component ought not be obvious unless the open characteristic is situated.

Here is the Syntax of DETAILS Element

Supported Browser
html5 tutorial html5 tutorial html5 tutorial html5 tutorial html5 tutorial


<details>
	
	<summary>
    Some contents goes here
    </summary>
    
</detals>

Below is complete syntax along with example


<!DOCTYPE html>

<html>
	
    <head>
    	 <title>Title name will go here</title>
    </head>
    
    <body>
		
        <details>
	
			<summary>
    		This is the default content.
    		</summary>
            
            <p>This is the main content, which will be shown.</p>
    
		</details>
        
    </body>
    
</html>

Download


HTML5 Elements — Quick References