Collapsible

An interactive component which expands and collapses a content area. It leverages Alpine.js's collapse plugin for smooth animations.

Default Collapsible

Click the trigger to expand or collapse the content area.

Source

<RzCollapsible class="w-[350px] space-y-2">
    <div class="flex items-center justify-between space-x-4 px-4">
        <h4 class="text-sm font-semibold">
            @rizzyui has 199 followers
        </h4>
        <CollapsibleTrigger AsChild>
            <RzButton Variant="ThemeVariant.Ghost" Size="Size.Small" class="w-9 p-0">
                <Blazicon Svg="MdiIcon.ChevronUpDown" class="size-4" />
                <span class="sr-only">Toggle</span>
            </RzButton>
        </CollapsibleTrigger>
    </div>
    <div class="rounded-md border px-4 py-3 font-mono text-sm">
        @jalexsocial
    </div>
    <CollapsibleContent class="flex flex-col gap-2">
        <div class="rounded-md border px-4 py-3 font-mono text-sm">
            @blazorators
        </div>
        <div class="rounded-md border px-4 py-3 font-mono text-sm">
            @microsoft
        </div>
    </CollapsibleContent>
</RzCollapsible>

Component Parameters

The following tables summarize the key parameters for the Collapsible components.

RzCollapsible

Property	Description	Type	Default
`ChildContent`	The content of the collapsible component, which should include a `CollapsibleTrigger` and a `CollapsibleContent`.	`RenderFragment`	Required
`DefaultOpen`	If set to `true`, the collapsible content will be open by default.	`bool`	`false`

CollapsibleTrigger

Property	Description	Type	Default
`ChildContent`	The content to be rendered as the trigger element.	`RenderFragment`	Required
`AsChild`	If set to `true`, the component will merge its properties and behavior into its first child element instead of rendering its own wrapper.	`bool`	`false`

CollapsibleContent

Property	Description	Type	Default
`ChildContent`	The content to be displayed inside the collapsible panel.	`RenderFragment`	Required