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

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

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

API

Parameters

Collapse

CollapseHeader

CollapseBody

Events

Collapse

CollapseHeader

Methods

Collapse