HTML <details> Tag

Concept

The <details> tag in HTML is used to specify content that the user can open and close on demand. It’s a way to organize information in a collapsible format, allowing users to view or hide additional details as needed. This can be particularly useful for FAQs, product descriptions, or any content that benefits from a toggleable display.

Implementation

Example 1: Basic Usage of <details> Tag

Here’s a simple example of how you can use the <details> tag to create a collapsible section:

<details>
  <summary>Click to view more details</summary>
  <p>This is the content inside the details tag. You can put any sort of content here.</p>
</details>

Example 2: Styling <details> and <summary> with CSS

You can also style the <details> and <summary> tags using CSS to create a more visually appealing collapsible section:

<details>
  <summary style="font-weight: bold;">Click to view more details</summary>
  <p style="color: blue;">This content is styled with CSS.</p>
</details>

Try it out below

powered by Advanced iFrame. Get the Pro version on CodeCanyon.

Attributes

• open: Specifies that the details should be visible (open) to the user.
• Global Attributes: The <details> tag supports all the global attributes in HTML.
• Event Attributes: The <details> tag also supports all the event attributes in HTML.

Browser Support

Default CSS Settings

Most browsers will display the <details> element with the following default CSS settings:

details {
  display: block;
}

Conclusion

The <details> tag offers a convenient way to present information in a collapsible format, enhancing the user experience by allowing control over content visibility.

It’s a versatile tag that can be used in various contexts, from FAQs to product descriptions, and can be styled with CSS to match the overall design of the webpage.