Collapse

Back

ChatBubble Countdown

Basic Usage

You can add an icon to any collapse header.

Set Open: true to expand by default.

Variants

Default (Clay)

Tactile surfaces with soft shadows.

Bordered

A clean, outlined appearance.

Flat

Content 1

Content 2

Usage

Import from the display package. Set Open: true to start expanded. Requires @alpinejs/collapse in the Alpine bundle.

@display.Collapse(display.CollapseProps{
    Title:   "Section Title",
    Icon:    myIcon(),
    Variant: "default", // "default" | "flat" | "bordered"
    Open:    false,
}) {
    Body content
}