Which tag is used to display additional information when we click to open or close on demand in HTML ?

Last Updated : 10 Feb, 2022

HTML provides many predefined tags which have some specific functionality for the contribution of developing web pages. In this article, we will learn how to show the additional information when the user clicks to open or close on demand in HTML. This can be simply done with the help of the HTML <details> tag in the document.

This tag is used to display the hidden information. It is used to develop a control called ” disclosure widget”. This control can be toggled (opened and closed) to disclose its details. This control is introduced with a triangular button that represents the state of the widget’ whether hidden content is visible or not. The caption is always specified in the HTML <summary> tag.

Syntax:

<details>
    <summary>... </summary>
    ...
</details>

Example: Below HTML code shows the list of browsers when the user clicks on the triangular button.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> 
        Summary tag to display the  
        additional information  
    </h3> 
      
    <!-- Details open tag starts -->
    <details> 
        <summary>Clent Side Browsers</summary><br> 
        <div> 
            <div> Google Chrome</div> 
            <div> Mozilla Firefox</div> 
            <div> Apple Safari</div> 
            <div> Opera mini</div> 
        </div> 
        <!-- Details open tag ends  -->
    </details> 
</body> 
  
</html> 