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>

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>

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;
}

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