Blazorise Collapse Component

Add expandable sections to your Blazor apps. Use Collapse to reveal or hide content-perfect for menus, filters, FAQs, and additional details.

Overview

The Collapse component provides an accessible way to show and hide content in Blazor applications. It's ideal for progressive disclosure patterns, such as "read more" areas, filter panels, or navigation sections. Pair it with a toggle (like a Button) in the header to control visibility through user interaction or programmatically.

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

The Collapse structure is simple and intuitive:

  • <Collapse> - the root container that manages the expanded or collapsed state.

    • <CollapseHeader> - always visible header; place your toggle control here (commonly a Button or clickable heading).

    • <CollapseBody> - the collapsible region that holds the main content.

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;
}

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