Blazor Collapse

Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.

How it works#

The Collapse component is used to show and hide content. Use ShowAsync, HideAsync, and ToggleAsync methods to toggle the content. Collapsing an element will animate the height from its current value to 0.
INFO
The animation effect of this component is dependent on the prefers-reduced-motion media query.
See the reduced motion section of our accessibility documentation.

Examples#

Click the buttons below to show and hide the content.
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Razor
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ShowContentAsync">Show content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="HideContentAsync">Hide content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ToggleContentAsync">Toggle content</Button>

<Collapse @ref="collapse1">
    <Card>
        <CardBody>
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
        </CardBody>
    </Card>
</Collapse>

@code {
    Collapse collapse1 = default!;

    private async Task ShowContentAsync() => await collapse1.ShowAsync();
    private async Task HideContentAsync() => await collapse1.HideAsync();
    private async Task ToggleContentAsync() => await collapse1.ToggleAsync();
}

Horizontal#

The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing.
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
Razor
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ShowContentAsync">Show content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="HideContentAsync">Hide content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ToggleContentAsync">Toggle content</Button>

<Collapse @ref="collapse1" Horizontal="true">
    <Card Style="width:300px;">
        <CardBody>
            This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
        </CardBody>
    </Card>
</Collapse>

@code {
    Collapse collapse1 = default!;

    private async Task ShowContentAsync() => await collapse1.ShowAsync();
    private async Task HideContentAsync() => await collapse1.HideAsync();
    private async Task ToggleContentAsync() => await collapse1.ToggleAsync();
}

Events#

Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality.
Event Name Description
OnHiding This event is fired immediately when the hide method has been called.
OnHidden This event is fired when a collapse component has been hidden from the user (will wait for CSS transitions to complete).
OnShowing This event fires immediately when the show method is called.
OnShown This event is fired when a collapse component has been made visible to the user (will wait for CSS transitions to complete).