Details Disclosure

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.

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

Open by Default

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

<details open>
	<summary><strong>The Toggle</strong></summary>
	The content.
</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.

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

Disclosure Groups

You can use the .divided class to create accordion-like disclosure groups.

<div class="divided">
	<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>
</div>

Custom Icons

For simplicity, Kelp uses the the browser-default icon for <summary> elements. The Kelp Cookbook (coming soon) includes a few recipes for customizing the icon including…

• Unicode characters
• A custom SVG or image
• Different icons for open/closed state
• Rotating the icon when the content expands
• Moving the icon after the text

This approach keeps the core code simple and easy-to-read, while letting you easily customize <details> disclosures to look exactly how you want.

Styling Content

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

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