Collapsible

A collapsible panel controlled by a button.

<script lang="ts">
	import { Collapsible } from '@sveltery/base/collapsible';
</script>

<Collapsible.Root
	class="flex min-h-36 w-48 flex-col justify-center text-neutral-950 dark:text-white"
>
	<Collapsible.Trigger
		class="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
	>
		Recovery keys
		<svg
			width="16"
			height="16"
			viewBox="0 0 16 16"
			fill="currentColor"
			class="block transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-90"
		>
			<path d="M6 12V4l4.5 4z" />
		</svg>
	</Collapsible.Trigger>
	<Collapsible.Panel
		class="flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] [&[hidden]:not([hidden='until-found'])]:hidden data-ending-style:h-0 data-starting-style:h-0"
	>
		<div class="flex flex-col gap-2 px-3.5 py-2">
			<div>alien-bean-pasta</div>
			<div>wild-irish-burrito</div>
			<div>horse-battery-staple</div>
		</div>
	</Collapsible.Panel>
</Collapsible.Root>

Anatomy

Import the component and assemble its parts:

<script lang="ts">
	import { Collapsible } from '@sveltery/base/collapsible';
</script>

<Collapsible.Root>
	<Collapsible.Trigger />
	<Collapsible.Panel />
</Collapsible.Root>

The hiddenUntilFound prop hides the closed panel with hidden="until-found" so the browser can search its contents with find-in-page—Ctrl+F (Cmd+F on macOS)—and reveal the panel when a match is found. The closed panel always remains mounted in the DOM, which also makes its contents indexable by search engines.

Older browsers that don't support hidden="until-found" keep the panel hidden until its trigger opens it, and find-in-page skips over the contents.

<Collapsible.Root>
	<Collapsible.Trigger>Shipping details</Collapsible.Trigger>
	<Collapsible.Panel hiddenUntilFound>Standard shipping takes 3–5 business days.</Collapsible.Panel>
</Collapsible.Root>

See the Accordion example for an interactive demo.

API reference

Root

Groups all parts of the collapsible. Renders a <div> element.

open boolean false

Name: open
Description: Whether the panel is open. Use bind:open to share it with the parent. A value passed without bind: holds until the parent changes it.
Type: boolean
Default: false
Binding: bind:open

disabled boolean | null false

Name: disabled
Description: Whether the collapsible should ignore user interaction.
Type: boolean | null
Default: false

onOpenChange function —

Name: onOpenChange
Description: Called before the open state changes. Call eventDetails.cancel() to veto it.
Type: (open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: CollapsibleRootState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: CollapsibleRootState, children: Snippet | undefined]>

open boolean

Name: open
Description: Whether the panel is currently open.
Type: boolean

disabled boolean

Name: disabled
Description: Whether the collapsible should ignore user interaction.
Type: boolean

transitionStatus TransitionStatus

Name: transitionStatus
Description: Shared open/close motion phase.
Type: TransitionStatus

data-open

Present when the collapsible is open.

data-closed

Present when the collapsible is closed.

data-disabled

Present when the collapsible is disabled.

data-starting-style

Present when the collapsible begins animating in.

data-ending-style

Present when the collapsible is animating out.

Attribute	Description	-
`data-open`	Present when the collapsible is open.
`data-closed`	Present when the collapsible is closed.
`data-disabled`	Present when the collapsible is disabled.
`data-starting-style`	Present when the collapsible begins animating in.
`data-ending-style`	Present when the collapsible is animating out.

Trigger

A button that opens and closes the collapsible panel. Renders a <button> element.

disabled boolean | null —

Name: disabled
Description: Whether the trigger should ignore user interaction. Defaults to the root's disabled value.
Type: boolean | null

nativeButton boolean true

Name: nativeButton
Description: Whether the host is a native <button>. Set false when render supplies a non-button element.
Type: boolean
Default: true

onclick MouseEventHandler<HTMLElement> | null —

Name: onclick
Description: Runs before the trigger's handler. Call event.preventDefault() to skip it.
Type: MouseEventHandler<HTMLElement> | null

render Snippet<[props: CollapsibleTriggerHostProps, state: CollapsibleTriggerState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <button>. Spread props onto the host and render children.
Type: Snippet<[props: CollapsibleTriggerHostProps, state: CollapsibleTriggerState, children: Snippet | undefined]>

open boolean

Name: open
Description: Whether the panel is currently open.
Type: boolean

disabled boolean

Name: disabled
Description: Whether the collapsible should ignore user interaction.
Type: boolean

transitionStatus TransitionStatus

Name: transitionStatus
Description: Shared open/close motion phase.
Type: TransitionStatus

data-panel-open

Present when the collapsible panel is open.

data-disabled

Present when the collapsible is disabled.

Attribute	Description	-
`data-panel-open`	Present when the collapsible panel is open.
`data-disabled`	Present when the collapsible is disabled.

Panel

A panel with the collapsible contents. Renders a <div> element.

hiddenUntilFound boolean false

Name: hiddenUntilFound
Description: Allows the browser's page search to find and expand the panel. Overrides keepMounted and uses hidden="until-found".
Type: boolean
Default: false

keepMounted boolean false

Name: keepMounted
Description: Whether to keep the panel in the DOM while it is closed. Ignored when hiddenUntilFound is set.
Type: boolean
Default: false

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: CollapsiblePanelState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: CollapsiblePanelState, children: Snippet | undefined]>

transitionStatus TransitionStatus

Name: transitionStatus
Description: Panel motion phase. Can settle to idle before the root does.
Type: TransitionStatus

open boolean

Name: open
Description: Whether the panel is currently open.
Type: boolean

disabled boolean

Name: disabled
Description: Whether the collapsible should ignore user interaction.
Type: boolean

data-open

Present when the collapsible panel is open.

data-closed

Present when the collapsible panel is closed.

data-starting-style

Present when the panel begins animating in.

data-ending-style

Present when the panel is animating out.

Attribute	Description	-
`data-open`	Present when the collapsible panel is open.
`data-closed`	Present when the collapsible panel is closed.
`data-starting-style`	Present when the panel begins animating in.
`data-ending-style`	Present when the panel is animating out.

--collapsible-panel-height

The collapsible panel's height.

--collapsible-panel-width

The collapsible panel's width.

Collapsible

Anatomy

Examples

Hidden until found

API reference

Root

Trigger

Panel