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
See the reduced motion section of our accessibility documentation.
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.
<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.
<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). |