HTML - <details> tag

The 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

Following is the syntax of the <details> tag −

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

Example

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>

When we run the above code, it will generate an output consisting of the text along with a dropdown menu. When the user, click on that menu, it displays its internal text.

Example

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>

On running the above code, the output window will pop up, consisting of the text along with a dropdown menu text displayed as soon as the page loads.

Example

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> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam natus porro ad fugit consectetur hic molestiae. Atque est illum error ullam? Nihil, vero est. Hic ab doloremque minus modi unde.
   </details>
</body>
</html>

When we run the above code, it will generate an output consisting of the text along with a dropdown menu applied with the CSS diplayed on the webpage

html_tags_reference.htm
Advertisements