Collapsible

Installation

uvx django_shadcn@latest add collapsible

Note: This component requires the Alpine.js Collapse plugin for animations. Without it the panel still opens and closes, without the transition.

Usage

<c-collapsible>
    <c-collapsible.trigger>Show details</c-collapsible.trigger>
    <c-collapsible.content>
        <p>Everything you were not looking at a moment ago.</p>
    </c-collapsible.content>
</c-collapsible>

open is Alpine state on the root, so the trigger and the content both see it without being told about each other. Start it expanded with default_open="true".

Examples

Open by default

<c-collapsible default_open="true">
    <c-collapsible.trigger>Already open</c-collapsible.trigger>
    <c-collapsible.content>...</c-collapsible.content>
</c-collapsible>

Notes

The height animation comes from Alpine's collapse plugin, the same one the accordion uses. Without it the panel still opens and closes, just instantly.