HTML - <details> tag

HTML <details> tag is used to create a disclosure widget that contains some information, and is visible when the widget is toggled to the open state.

A summary (or label) should be provided using the HTML <summary> tag. A disclosure widget is represented onscreen using a small black triangle that rotates to indicate open and closed status, with labels next to the triangles. The content of the summary is used as a label for the disclosure widget.

Syntax

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

Attribute

HTML style tag supports Global and Event attributes of HTML. Accept a specific attribute as well which is listed below.

Attribute	Value	Description
open	open	Specifies that the disclosure widget should be open, by default it is closed.

Examples of HTML details Tag

Bellow examples will illustrate the usage of details tag. Where, when and how to use details tag to create details elements of any website.

Creating Details Element

The following program is showing the usage of the HTML <details> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML details tag</title>
</head>
<body>
   <!--create details tag-->
   <p>Click on the below label to open the details.</p>
   <details>
      <summary>Open</summary> 
         You clicked on label(i.e. summary).
   </details>
</body>
</html>

Details Element with Open Attribute

Here, we are using the 'open' attribute within the 'details' element to set the details content should be visible after the webpage is loaded.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML details tag</title>
</head>
<body>
   <!--create details tag-->
   <p>HTML 'details' element example.</p>
   <details open>
      <summary>Open</summary> 
         You have used the 'open' attribute, 
         so by default, it opened already.
   </details>
</body>
</html>

Disclosure widget using details Tag

Let's look into the following example, we're creating a disclosure widget, using the HTML <details> tag to add additional information that users can toggle open and close. We use CSS for styling with the <details> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML details tag</title>
   <style>
      details {
         border: 1px solid blue;
         border-radius: 10px;
         padding: 4px;
         color: green;
      }

      details[open] {
         padding: 1px;
      }

      details[open] summary {
         border-bottom: 1px solid black;
         margin-bottom: 5px;
         color: red;
      }
   </style>
</head>
<body>
   <!--create details tag-->
   <p>HTML 'details' element example.</p>
   <details>
      <summary>Open</summary>
         A disclosure widget is represented onscreen using a 
         small black triangle that rotates to indicate open 
         and closed status, with labels next to the triangles. 
         The content of the summary is used as a label for the 
         disclosure widget.
      </details>
</body>
</html>

Supported Browsers

Tag
footer	Yes 12.0	Yes 79.0	Yes 49.0	Yes 6.0	Yes 15.0

html_tags_reference.htm