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).

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>
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" @onclick="ClearMessage">Clear Messages</Button>

<Collapse @ref="collapse1"
          Class="mt-3"
          OnShowing="OnCollapseShowingAsync"
          OnShown="OnCollapseShownAsync"
          OnHiding="OnCollapseHidingAsync"
          OnHidden="OnCollapseHiddenAsync">
    <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>

<div class="mt-3">
    @foreach (var item in messages)
    {
        <p>@item</p>
    }
</div>

@code {
    Collapse collapse1 = default!;

    List<string> messages = new List<string>();

    private async Task ShowContentAsync() => await collapse1.ShowAsync();
    private async Task HideContentAsync() => await collapse1.HideAsync();
    private async Task ToggleContentAsync() => await collapse1.ToggleAsync();

    private void OnCollapseShowingAsync() => messages.Add($"Event: OnShowing called {DateTime.Now.ToLocalTime()}");

    private void OnCollapseShownAsync() => messages.Add($"Event: OnShown called {DateTime.Now.ToLocalTime()}");

    private void OnCollapseHidingAsync() => messages.Add($"Event: OnHiding called {DateTime.Now.ToLocalTime()}");

    private void OnCollapseHiddenAsync() => messages.Add($"Event: OnHidden called {DateTime.Now.ToLocalTime()}");

    private void ClearMessage() => messages = new List<string>();
}

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor Bootstrap

Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
Code licensed Apache License 2.0.
Currently v2.2.1.

Blazor Collapse

How it works#

Examples#

Horizontal#

Events#

Links

Guides

Community