Skip to Content

The Details & Summary Tags in HTML

The details and summary tags introduced in HTML 5.1 are used together to display a headline with an expandable and contractible description.

A great use case for these tags is a frequently asked questions section, where you would display a list of questions sequentially with the answers hidden from the display. Clicking the question would then show or hide the answers from view, depending on its current view state.

Usage

Here is a quick code snippet of how you use the details and summary HTML tags together:

<details>
<summary>Why did the SQL databases leave the NoSQL bar?</summary>
<div>Because they couldn't find a table.</div>
</details>


Why did the SQL databases leave the NoSQL bar?
Because they couldn't find a table.

By default, the details pane is closed so you can only see the summary. But, by adding an open attribute, the details pane will automatically show all its contents:

<details open>
<summary>Can you automatically show the details?</summary>
<div>Yes, you can!</div>
</details>

Can you automatically show the details?
Yes, you can!

Styling

Styling each of the tags is pretty self-explanatory. Here's an example:

details {
border: 1px solid #dc9d50;
background-color: #dc9d50;
border-radius: 5px;
font-size: 20px;
padding: 15px 20px;
color: white;
}

details summary {
cursor: pointer;
}

details div {
border-radius: 5px;
background-color: #15171d;
font-size: 20px;
padding: 15px 20px;
margin-top: 10px;
}

What does it look like to expand all the things?
It looks something like this!

Conclusion

The details and summary tags are supported by all major browsers to date, so you shouldn't have any problems with implementation.

Browser Support

Created: January 16, 2022

Comments

There are no comments yet. Start the conversation!

Leave a Comment

Comment Etiquette: Wrap code in a <code> and </code>. Please keep comments on-topic, do not post spam, keep the conversation constructive, and be nice to each other.