Blazorise Collapse Component

Keep supporting content available without taking up space until users need it.

Overview

Use the Collapse component for filter panels, additional details, and other sections that users can expand or hide. A visible header provides a place for the control that toggles the content.

Using collapsible sections helps organize information, keeping the interface clean and easy to navigate. This approach also complements accordions when you need a single collapsible block rather than multiple linked items.

Structure

A Collapse contains an always-visible header and a body that expands or collapses.

  • <Collapse>Manages the expanded or collapsed state.
    • <CollapseHeader>The visible header; can contain a toggle button.
    • <CollapseBody>Contains the content that expands or collapses.

Examples

Basic Example

Click the button to toggle the collapsible content. This example shows the standard header and body structure for collapsible sections.

This is some collapsible content. It can be shown or hidden by clicking the button. 
<Collapse @bind-Visible="@visible">
    <CollapseHeader>
        <Button Color="Color.Primary" Clicked="@(() => visible = !visible)">
            Toggle collapse
        </Button>
    </CollapseHeader>
    <CollapseBody>
        <Card>
            <CardBody>
                This is some collapsible content. It can be shown or hidden by clicking the button.
            </CardBody>
        </Card>
    </CollapseBody>
</Collapse>

@code {
    bool visible = true;
}

Programmatic Example

This example demonstrates programmatic control of the collapse state using a button in the header to toggle visibility.

This is some collapsible content. It can be shown or hidden by clicking the button. 
<Collapse @ref="@collapseRef">
    <CollapseHeader>
        <Button Color="Color.Primary" Clicked="@collapseRef.Toggle">
            Toggle collapse
        </Button>
    </CollapseHeader>
    <CollapseBody>
        <Card>
            <CardBody>
                This is some collapsible content. It can be shown or hidden by clicking the button.
            </CardBody>
        </Card>
    </CollapseBody>
</Collapse>

@code {
    Collapse collapseRef;
}

Animation

Set Animated="false" for immediate transitions, or use AnimationDuration to adjust their duration in milliseconds. A duration of zero or less disables transitions. Leaving the duration unset preserves the selected CSS provider's timing.

These settings control panel transitions where supported. Bootstrap 4 and Bootstrap 5 animate expansion and collapse, using a default duration of 350 milliseconds. The controls apply to this collapse; nested components keep their own settings.

Adjust the operating settings before starting the next production run. 

<Field>
    <Switch @bind-Value="animated">Animate transitions</Switch>
</Field>
<Field>
    <FieldLabel>Animation duration</FieldLabel>
    <FieldBody>
        <Select TValue="int?" @bind-Value="animationDuration">
            <SelectItem TValue="int?" Value="@((int?)null)">Provider default</SelectItem>
            <SelectItem TValue="int?" Value="0">Immediate</SelectItem>
            <SelectItem TValue="int?" Value="100">100 ms</SelectItem>
            <SelectItem TValue="int?" Value="200">200 ms</SelectItem>
            <SelectItem TValue="int?" Value="400">400 ms</SelectItem>
        </Select>
    </FieldBody>
</Field>

<Collapse Animated="@animated" AnimationDuration="@animationDuration" @bind-Visible="visible">
    <CollapseHeader>
        <Button Color="Color.Primary" Clicked="@(() => visible = !visible)">Toggle settings</Button>
    </CollapseHeader>
    <CollapseBody>
        <Paragraph Margin="Margin.Is0">
            Adjust the operating settings before starting the next production run.
        </Paragraph>
    </CollapseBody>
</Collapse>

@code {
    private bool animated = true;

    private int? animationDuration;

    private bool visible = true;
}

Best Practices

Use Clear Toggles

The header should describe the hidden content, and the intended toggle must be reachable and operable by keyboard. Keep the expanded state synchronized through one binding or event path, especially when the collapse can also be controlled programmatically.

Essential Information

Do not place critical status, validation feedback, or the only way to complete a task inside content that starts collapsed. When several related collapsible sections need coordinated behavior, use an Accordion instead.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page