Skip to main content Accessibility Feedback

Details & Summary

The <details> and <summary> elements are native HTML elements that create a disclosure component.

Usage

Put the content to reveal inside a <details> element. The text that should act as the toggle goes inside a <summary> element, which is also nested inside the <details> element.

Kelp replaces the default browser styles with plus icon (+) that rotates into an x when the disclosure is open.

The Toggle The content. 

<details class="margin-end-space">
	<summary><strong>The Toggle</strong></summary>
	The content.
</details>

Styling

You can combine the <details> and <summary> elements with other components—like the .callout class—to make them look different.

Callout Content
The content.
Callout Wrapper The content. 
<details>
	<summary><strong>Callout Content</strong></summary>
	<div class="callout">
		The content.
	</div>
</details>

<div class="callout outline">
	<details>
		<summary><strong>Callout Wrapper</strong></summary>
		The content.
	</details>
</div>

Open by Default

Use the [open] attribute to make your <details> element expanded by default.

The Toggle The content. 

<details open>
	<summary><strong>The Toggle</strong></summary>
	The content.
</details>

Disclosure Groups

When you group multiple <details> elements together, Kelp automatically styles them like an accordion group.

Merlin The wizard…
Gandalf The gray…
Radagast The dude who talks to animals… 

<details>
	<summary><strong>Merlin</strong></summary>
	The wizard...
</details>

<details>
	<summary><strong>Gandalf</strong></summary>
	The gray...
</details>

<details>
	<summary><strong>Radagast</strong></summary>
	The dude who talks to animals...
</details>

Exclusive Accordions

If you assign every <details> element in your group a [name] attribute with the same value, modern browsers will automatically close any other open disclosures in the group.

Note: This is often considered an anti-pattern by accessibility specialists, as it limits a person's ability to compare content from one item to another. It can also create challenges for people with cognitive disabilities, and create unexpected behaviors for screen reader users. Use this technique with caution.

Merlin The wizard…
Gandalf The gray…
Radagast The dude who talks to animals… 

<details name="magic-folk" open>
	<summary><strong>Merlin</strong></summary>
	The wizard...
</details>

<details name="magic-folk">
	<summary><strong>Gandalf</strong></summary>
	The gray...
</details>

<details name="magic-folk">
	<summary><strong>Radagast</strong></summary>
	The dude who talks to animals...
</details>