In this section, we will learn what HTML <details> element is and how it works.

What is <details> Tag in HTML?

HTML <details> element is used to create clickable content in a document that, by default, only a summary of that content is visible to users.

When we say clickable content, that means the content by default is hidden from users’ eyes, with only the summary part visible. If then users want to see the whole content, they can click the summary and the entire content become visible to them to see.

The content we set for the <details> element is divided into two parts:

• HTML <summary> element: This element is used to create the summary of the content we set for the <details> element. This is the part where users can see and click if they want to see the full content.
• Full content: after setting the <summary>, we can add the full content for the <details> element.

HTML <details> Tag Syntax:

<details>

<summary> Summary of the content </summary>

The full content…

</details>

HTML <details> Tag Values

The value we set within the body of HTML <details> element is one HTML <summary> element and after that comes the full content as the syntax of this element shows.

The value we set in the <summary> element is the part where users can see and click if they want to see the whole content.

Example: detail information

See the Pen detail information by Omid Dehghan (@odchan1) on CodePen.

HTML <details> Tag Attributes

HTML <details> element has one Boolean attribute named `open`.

What is open Attribute in HTML <details> Tag?

HTML <details> open attribute is used to set the default behavior of the <details> element.

By default, the content of a <details >element is close and users need to click on the summary to see the full content. But if we add the `open` attribute to this element, then the default behavior will change to open (meaning the full content should be visible to users by default) and if users click the summary content of the <details> element, the content becomes hidden instead.

HTML open Attribute in <details> Tag Syntax:

<details open> …. </details>

<details> Tag open Attribute Values

The open attribute is a Boolean attribute, which means it doesn’t take any value.

Example: using open attribute in HTML <details> tag

See the Pen using open attribute in HTML <details> tag by Omid Dehghan (@odchan1) on CodePen.