Collapse

26 · UI elements

Opens and closes the area below a link when the link is clicked. Used to hide details, extra options or long descriptions at first glance.

acun:collapse

Basic usage

label is the text of the trigger link, and the content to hide goes in the slot. When the area opens, the arrow next to the link flips and the state is announced with aria-expanded.

LIVE EXAMPLE

<acun:collapse label="Import details">
    <p class="text-sm text-gray-600 dark:text-zinc-400">1,248 rows were read: 1,201 products were added, 39 products were updated, and 8 rows were skipped because of an invalid barcode.</p>
</acun:collapse>

Prop	Values
`label`	Trigger text

Open initially

With open, the area starts open. Use it for details the user should see right away but may want to hide.

LIVE EXAMPLE

<acun:collapse label="Skipped rows (3)" open>
    <ul class="space-y-1 text-sm text-gray-600 dark:text-zinc-400">
        <li>Row 14 · Barcode has 12 digits</li>
        <li>Row 87 · Category code not found</li>
        <li>Row 203 · The same SKU is listed twice</li>
    </ul>
</acun:collapse>

Prop	Values
`open`	true \| false

API

Props and slots

The values the component accepts.

Prop	Default	Description
`label`	—	Required; text of the trigger link
`open`	`false`	Open initially

Slots: default content (the area that opens and closes)