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.

<details class="margin-end-space">
	<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>

Disclosure Groups

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

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

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

Icon

You can modify the icon on the <summary> element using a handful of CSS variables.

• --gap - The amount of space between the text and icon.
• --icon - The icon. By default, it’s a unicode caret.
• --icon-size - How big the icon should be relative to the text.
• --icon-font - The font family to use for the icon (can affect its appearance).
• --rotation-closed - How much to rotate the icon when the disclosure is closed.
• --rotation-open - How much to rotate the icon when the disclosure is [open].
• --transition - A transition to animate the icon when opening/closing the disclosure.

@layer kelp.extend {
	summary {
		--gap: var(--size-4xs);
		--icon: "\0025BC";
		--icon-size: var(--size-xs);
		--icon-font: var(--font-primary);
		--rotation-closed: rotate(-90deg);
		--rotation-open: none;
		--transition: none;
	}
}

Styling

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>

You can also adjust the border and spacing between items in a disclosure group by adjust CSS variables on the <details> element.

@layer kelp.extend {
	details {
		--border-color: var(--color-border-accent);
		--gap: var(--size-3xs);
	}
}