Blazor Accordion

Build vertically collapsing accordions in combination with our Collapse component.

How it works#

The Accordion component uses the Collapse component internally to make it collapsible.

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 accordions below to expand/collapse the accordion content.

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

razor

<Accordion>
    <AccordionItem Title="Accordion Item #1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

Title with Icon#

To customize the accordion title, use TitleTemplate, as shown in the below example.

razor

<Accordion>
    <AccordionItem>
        <TitleTemplate>
            <Icon Name="IconName.HouseFill" Class="me-1" /> Accordion Item #1
        </TitleTemplate>
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem>
        <TitleTemplate>
            <Icon Name="IconName.PersonFill" Class="me-1" /> Accordion Item #2
        </TitleTemplate>
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem>
        <TitleTemplate>
            <Icon Name="IconName.PhoneFill" Class="me-1" /> Accordion Item #3
        </TitleTemplate>
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

Flush#

Set the Flush parameter to true to remove borders and rounded corners to render accordions edge-to-edge with their parent container.

<Accordion Flush="true">
    <AccordionItem Title="Accordion Item #1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

Set default active accordion item#

Set the IsActive parameter to true to keep the accordion item open by default.

<Accordion>
    <AccordionItem Title="Accordion Item #1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2" IsActive="true">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

Always open#

Set the AlwaysOpen parameter to true to keep accordion items open when another item is opened.

<Accordion AlwaysOpen="true">
    <AccordionItem Title="Accordion Item #1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

Show / hide individual accordion items#

You can show and hide individual accordion items in several ways.

To show an accordion item, use predefined methods ShowFirstAccordionItemAsync, ShowLastAccordionItemAsync, ShowAccordionItemByNameAsync, and ShowAccordionItemByIndexAsync.
To hide an accordion item, use predefined methods HideFirstAccordionItemAsync, HideLastAccordionItemAsync, HideAccordionItemByNameAsync, and HideAccordionItemByIndexAsync.

This is the fourth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the fifth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the sixth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Show

Hide

<Accordion @ref="accordion1" Class="mb-3">
    <AccordionItem Title="Home" Name="AccordionItem1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Profile" Name="AccordionItem2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Contact" Name="AccordionItem3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Products" Name="Products">
        <Content>
            <b>This is the fourth item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="FAQs" Name="FAQ">
        <Content>
            <b>This is the fifth item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="About" Name="AccordionItem6">
        <Content>
            <b>This is the sixth item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

<h4>Show</h4>

<Button Color="ButtonColor.Primary" @onclick="ShowFirstAccordionItemAsync">First Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowSecondAccordionItemAsync">Second Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowThirdAccordionItemAsync">Third Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowProductsAccordionItemAsync">Products Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowFaqsAccordionItemAsync">FAQs Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowLastAccordionItemAsync">Last Accordion Item</Button>

<h4 class="mt-2">Hide</h4>

<Button Color="ButtonColor.Primary" @onclick="HideFirstAccordionItemAsync">First Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="HideSecondAccordionItemAsync">Second Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="HideThirdAccordionItemAsync">Third Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="HideProductsAccordionItemAsync">Products Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="HideFaqsAccordionItemAsync">FAQs Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="HideLastAccordionItemAsync">Last Accordion Item</Button>

@code {
    private Accordion accordion1 = default!;

    private async Task ShowFirstAccordionItemAsync() => await accordion1.ShowFirstAccordionItemAsync();
    private async Task ShowSecondAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(1);
    private async Task ShowThirdAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(2);
    private async Task ShowProductsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync("Products");
    private async Task ShowFaqsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync("FAQ");
    private async Task ShowLastAccordionItemAsync() => await accordion1.ShowLastAccordionItemAsync();
    private async Task HideFirstAccordionItemAsync() => await accordion1.HideFirstAccordionItemAsync();
    private async Task HideSecondAccordionItemAsync() => await accordion1.HideAccordionItemByIndexAsync(1);
    private async Task HideThirdAccordionItemAsync() => await accordion1.HideAccordionItemByIndexAsync(2);
    private async Task HideProductsAccordionItemAsync() => await accordion1.HideAccordionItemByNameAsync("Products");
    private async Task HideFaqsAccordionItemAsync() => await accordion1.HideAccordionItemByNameAsync("FAQ");
    private async Task HideLastAccordionItemAsync() => await accordion1.HideLastAccordionItemAsync();
}

Show / hide all accordion items#

When the AlwaysOpen parameter is set to true, you can show all accordion items simultaneously using the ShowAllAccordionItemsAsync method. The HideAllAccordionItemsAsync method will hide all accordion items, regardless of the value of AlwaysOpen.

<Accordion AlwaysOpen="true" @ref="accordion1" class="mb-2">
    <AccordionItem Title="Accordion Item #1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

<Button Color="ButtonColor.Primary" @onclick="ShowAllAccordionItemsAsync">Show All Accordion Items</Button>
<Button Color="ButtonColor.Primary" @onclick="HideAllAccordionItemsAsync">Hide All Accordion Items</Button>

@code {
    private Accordion accordion1 = default!;

    private Task ShowAllAccordionItemsAsync() => accordion1.ShowAllAccordionItemsAsync();
    private Task HideAllAccordionItemsAsync() => accordion1.HideAllAccordionItemsAsync();
}

Events#

Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality.

Event Name	Description
`OnHiding`	This event is fired immediately when the `hide` method has been called.
`OnHidden`	This event is fired when a accordion item 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 accordion item has been made visible to the user (will wait for CSS transitions to complete).

INFO

If no accordion item is active, then the OnHiding and OnHidden events will not be fired.

<Accordion @ref="accordion1"
           OnShowing="OnShowingAsync"
           OnShown="OnShownAsync"
           OnHiding="OnHidingAsync"
           OnHidden="OnHiddenAsync">
    <AccordionItem Title="Accordion Item #1" Name="AccordionItem1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2" Name="AccordionItem2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3" Name="AccordionItem3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

@code {
    private Accordion accordion1 = default!;

    [Inject] ToastService ToastService { get; set; } = default!;

    private void OnShowingAsync(AccordionEventArgs args)
    {
        ToastService.Notify(new ToastMessage(
            type: ToastType.Primary,
            message: $"Event Name: Showing, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));
    }

    private void OnShownAsync(AccordionEventArgs args)
    {
        ToastService.Notify(new ToastMessage(
            type: ToastType.Primary,
            message: $"Event Name: OnShown, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));
    }

    private void OnHidingAsync(AccordionEventArgs args)
    {
        ToastService.Notify(new ToastMessage(
            type: ToastType.Primary,
            message: $"Event Name: OnHiding, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));
    }

    private void OnHiddenAsync(AccordionEventArgs args)
    {
        ToastService.Notify(new ToastMessage(
            type: ToastType.Primary,
            message: $"Event Name: OnHidden, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));
    }
}

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.