How to define a visible heading for details element in HTML5 ?

Last Updated : 22 Mar, 2021

In this article, we will learn how to define a visible heading for the <details> element. This element is used to create a widget that reveals information when it is in the “open” state. The state can be toggled by clicking on the element. The contents that have to be revealed are enclosed within the <details> tag.

Approach: The <summary> tag is used to define the heading that would be visible regardless of the widget state. When the first child of the <details> element is the <summary> element, then the content of this tag is used to display the label for the widget.

Syntax:

<details>
  <!-- Define the heading to be displayed -->
  <summary>Heading Summary One</summary>
   This is the content for heading one.
</details>

Example: The below examples illustrate the <summary> tag to define the heading of the <details> element.

HTML

<html> 
<head> 
  <style> 
    details { 
      padding: 10px; 
      border: 2px solid; 
    } 
  
    summary { 
      cursor: pointer; 
      outline: 0; 
      padding-bottom: 10px; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color: green;"> 
    GeeksforGeeks 
  </h1> 
  <h3> 
    How to define a visible heading for 
    a <details> element in HTML5? 
  </h3> 
  
  <!-- Define the <details> element -->
  <details open> 
  
    <!-- Define the heading to be displayed -->
    <summary>Heading Summary One</summary> 
    This is the content for heading one. The  
    content outside the <summary> tag 
    is displayed here. 
  </details> 
  
  <!-- Define the <details> element -->
  <details> 
  
    <!-- Define the heading to be displayed -->
    <summary>Heading Summary Two</summary> 
    This is the content for heading two. The  
    content outside the <summary> tag  
    is displayed here. 
  </details> 
  
  <!-- Define the <details> element -->
  <details> 
  
    <!-- Define the heading to be displayed -->
    <summary>Heading Summary Three</summary> 
    This is the content for heading three. The 
    content outside the <summary> tag  
    is displayed here. 
  </details> 
</body> 
</html>