Collapsible

An interactive disclosure that shows or hides a section of content behind a trigger. Reach for it to progressively reveal secondary details, FAQs, or advanced settings without overwhelming the initial view. The caret animates with the state, and the content transitions open and closed. Anatomy: Collapsible (root, owns the open state) wraps CollapsibleTrigger (the clickable header with a rotating caret) and CollapsibleContent (the region that expands).

Show and hide

For detail a reader may want and usually doesn't — a raw payload, an audit trail, the source behind an example (this site's own Code toggles are these). The trigger keeps its chevron, which rotates with the state, so the control says which way it is about to go.

<Collapsible class="w-full max-w-md">
	<CollapsibleTrigger>Webhook payload</CollapsibleTrigger>
	<CollapsibleContent>
		<div class="bg-card mt-2 rounded-lg p-3">
			<p class="text-muted text-xs">order.paid · 2026-08-09T14:22:08Z · 1.2 KB</p>
		</div>
	</CollapsibleContent>
</Collapsible>

Open by default

open is bindable, so the state can start open and be read back. Start it open where the content is the point and hiding it would just cost a click.

12 Curzon Street
London W1J 5HH
United Kingdom

Currently open.

<div class="w-full max-w-md space-y-2">
	<Collapsible bind:open>
		<CollapsibleTrigger>Shipping address</CollapsibleTrigger>
		<CollapsibleContent>
			<div class="text-muted px-3 py-2 text-sm">
				12 Curzon Street<br />London W1J 5HH<br />United Kingdom
			</div>
		</CollapsibleContent>
	</Collapsible>
	<p class="text-muted text-xs">Currently {open ? 'open' : 'closed'}.</p>
</div>

API

`Collapsible`

Prop	Type	Default	Description
`class`	`string`		Additional Tailwind classes merged onto the root element.
`open` bindable	`boolean`	`false`	Whether the content is expanded. Bindable for two-way control.
`children`	`import('svelte').Snippet`		The trigger and content to render inside the root.
`disabled`	`boolean`		Disables the trigger so the content cannot be toggled (forwarded via `...rest`).

`CollapsibleTrigger`

The clickable header of a Collapsible that toggles the open state, with a caret that rotates when expanded.

Prop	Type	Default	Description
`class`	`string`		Additional Tailwind classes merged onto the trigger.
`children`	`import('svelte').Snippet`		Trigger label content.

`CollapsibleContent`

The region of a Collapsible that expands and collapses, revealed with a fade transition.

Prop	Type	Default	Description
`class`	`string`		Additional Tailwind classes merged onto the content element.
`children`	`import('svelte').Snippet`		Content to reveal when expanded.