Collapsible

An expand-and-collapse panel.

Learn how type is set — choosing a type scale, tuning leading, and spacing letters with tracking so text reads cleanly.

<script lang="ts">
  import { Collapsible } from '@shardsui/svelte/collapsible'
</script>

<Collapsible.Root class="flex w-72 flex-col text-sm">
  <p class="m-0 text-gray-600">
    Learn how type is set — choosing a type scale, tuning leading, and spacing letters with tracking
    so text reads cleanly.
  </p>
  <Collapsible.Panel
    class="h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0"
  >
    <p class="m-0 pt-2 text-gray-600">
      Build a modular type scale, balance leading against line length, and match x-heights when
      pairing typefaces.
    </p>
  </Collapsible.Panel>
  <Collapsible.Trigger
    class="mt-3 self-center rounded-xs text-sm font-medium text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950"
  >
    {#snippet children({ open })}
      {open ? 'Show less' : 'Show more'}
    {/snippet}
  </Collapsible.Trigger>
</Collapsible.Root>

Anatomy

<script>
  import { Collapsible } from '@shardsui/svelte/collapsible'
</script>

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

API reference

Root

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

Prop	Type	Default
`as`	`keyof HTMLElementTagNameMap`	`'div'`

`class`	`string`	—

`style`	`string`	—

`open`	`boolean`	`false`

`onOpenChange`	`(open: boolean) => void`	—

`disabled`	`boolean`	`false`

`children`	`Snippet<[{ open, disabled, transitionStatus }]>`	—

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

Trigger

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

Prop	Type	Default
`as`	`keyof HTMLElementTagNameMap`	`'button'`

`class`	`string`	—

`style`	`string`	—

`disabled`	`boolean`	—

`children`	`Snippet<[{ open, disabled, transitionStatus }]>`	—

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

Panel

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

Prop	Type	Default
`as`	`keyof HTMLElementTagNameMap`	`'div'`

`class`	`string`	—

`style`	`string`	—

`id`	`string`	auto

`hiddenUntilFound`	`boolean`	`false`

`keepMounted`	`boolean`	`false`

`children`	`Snippet<[{ open, disabled, transitionStatus }]>`	—

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

CSS Variable	Description
`--collapsible-panel-height`	The panel's computed height.
`--collapsible-panel-width`	The panel's computed width.