Collapsible

Show and hide sections with smooth animation. Supports nesting, disabled state, and reactive open/close control.

Order #4189

StatusShipped

Shipping address

100 Market St, San Francisco

Items

2x Studio Headphones

Installation

CLI

Install the component using the StarUI CLI:

star add collapsible

Examples

Filter Panel

Multiple independent collapsible sections inside a card. Category uses open=True to start expanded.

File Tree

Nested collapsibles with chevron rotation to build hierarchical navigation.

button.py

card.py

dialog.py

utils.py

cn.py

app.py

README.md

CHANGELOG.md

pyproject.toml

.gitignore

Disabled

Use disabled=True to lock a section. The trigger becomes non-interactive.

Release Notes

v2.1.0 – Bug fixes and performance improvements

v2.0.0 – New component architecture

Internal Roadmap

Restricted

This content requires admin access.

from starhtml import *

Div(
    Collapsible(
        Div(
            P("Release Notes", cls="text-sm font-semibold"),
            CollapsibleTrigger(
                Icon("lucide:chevrons-up-down", cls="size-4"),
                Span("Toggle release notes", cls="sr-only"),
                cls="inline-flex size-8 items-center justify-center rounded-md "
                "hover:bg-accent hover:text-accent-foreground",
            ),
            cls="flex items-center justify-between gap-4 px-4",
        ),
        CollapsibleContent(
            Div(
                Span("v2.1.0 – Bug fixes and performance improvements", cls="text-sm"),
                cls="rounded-md border px-4 py-2",
            ),
            Div(
                Span("v2.0.0 – New component architecture", cls="text-sm"),
                cls="rounded-md border px-4 py-2",
            ),
            cls="flex flex-col gap-2",
        ),
        open=True,
        cls="flex flex-col gap-2",
    ),
    Collapsible(
        Div(
            Div(
                P("Internal Roadmap", cls="text-sm font-semibold"),
                Badge("Restricted", variant="outline", cls="text-xs"),
                cls="flex items-center gap-2",
            ),
            CollapsibleTrigger(
                Icon("lucide:lock", cls="size-4"),
                Span("Toggle roadmap", cls="sr-only"),
                cls="inline-flex size-8 items-center justify-center rounded-md",
            ),
            cls="flex items-center justify-between gap-4 px-4",
        ),
        CollapsibleContent(
            Div(
                Span("This content requires admin access.", cls="text-sm text-muted-foreground"),
                cls="rounded-md border border-dashed px-4 py-2",
            ),
            cls="flex flex-col gap-2",
        ),
        disabled=True,
        cls="flex flex-col gap-2",
    ),
    cls="w-[350px] space-y-6",
)

API Reference

Props

Prop	Type	Default	Description
`open`	`bool`	`False`	Whether the content is initially expanded
`disabled`	`bool`	`False`	Prevents the trigger from toggling
`signal`	`str \| Signal`	`auto-generated`	Datastar signal name for reactive state management
`cls`	`str`	`''`	Additional CSS classes

Component	Description
`Collapsible`	Root container that manages open/close state
`CollapsibleTrigger`	Clickable element that toggles the content. Renders a bare <button> — style with cls
`CollapsibleContent`	Collapsible content panel with CSS grid animation. Accepts role (str, default 'region')