Blazorise Accordion component

Organize related content into expandable sections to keep pages easier to scan.

Overview

Use the Accordion component for FAQs, grouped settings, and supporting details that users can explore as needed. Section headings stay visible, helping users find a topic before expanding its content.

Structure

An Accordion groups expandable items. Each item has an always-visible header containing a toggle and a body for its collapsible content.

  • <Accordion>Groups the items.
    • <AccordionItem>One expandable section.
      • <AccordionHeader>Remains visible when the item is collapsed.
        • <AccordionToggle>Expands or collapses the item.
      • <AccordionBody>Contains the collapsible content.

Examples

Default accordion

Use the @bind-Visible parameter to properly keep previously opened accordion elements unchanged.

Blazorise is a component library built on top of Blazor, which is a framework from Microsoft for building interactive client-side web UIs using .NET. Blazorise provides a rich set of components that are easy to use and customizable, helping developers to build responsive and modern web applications more efficiently.
Blazorise supports several CSS frameworks, including Bootstrap (known for responsive design elements), Bulma (valued for simplicity and Flexbox base), Material (inspired by Google's Material Design), Ant Design (geared towards enterprise-level products and adapting React components' design principles), and Tailwind CSS (famous for its utility-first approach and versatility). These frameworks provide distinct styles and philosophies, offering developers a range of options to best suit their project's requirements.
A Blazorise commercial license typically includes access to advanced components, priority support, options for dedicated consultations, frequent updates and bug fixes, a license for unrestricted commercial use, potential access to the source code, and opportunities for training and workshops. This package enhances functionality, offers better support, and provides operational security for commercial projects. 
<Accordion>
    <AccordionItem @bind-Visible="@accordionItem1Visible">
        <AccordionHeader>
            <Heading Size="HeadingSize.Is5">
                <AccordionToggle>What is Blazorise?</AccordionToggle>
            </Heading>
        </AccordionHeader>
        <AccordionBody>
            Blazorise is a component library built on top of Blazor, which is a framework from Microsoft for building interactive client-side web UIs using .NET. Blazorise provides a rich set of components that are easy to use and customizable, helping developers to build responsive and modern web applications more efficiently.
        </AccordionBody>
    </AccordionItem>
    <AccordionItem @bind-Visible="@accordionItem2Visible">
        <AccordionHeader>
            <Heading Size="HeadingSize.Is5">
                <AccordionToggle>What CSS  frameworks does Blazorise support?</AccordionToggle>
            </Heading>
        </AccordionHeader>
        <AccordionBody>
            Blazorise supports several CSS frameworks, including Bootstrap (known for responsive design elements), Bulma (valued for simplicity and Flexbox base), Material (inspired by Google's Material Design), Ant Design (geared towards enterprise-level products and adapting React components' design principles), and Tailwind CSS (famous for its utility-first approach and versatility). These frameworks provide distinct styles and philosophies, offering developers a range of options to best suit their project's requirements.
        </AccordionBody>
    </AccordionItem>
    <AccordionItem @bind-Visible="@accordionItem3Visible">
        <AccordionHeader>
            <Heading Size="HeadingSize.Is5">
                <AccordionToggle>What are the benefits of Blazorise commercial license?</AccordionToggle>
            </Heading>
        </AccordionHeader>
        <AccordionBody>
            A Blazorise commercial license typically includes access to advanced components, priority support, options for dedicated consultations, frequent updates and bug fixes, a license for unrestricted commercial use, potential access to the source code, and opportunities for training and workshops. This package enhances functionality, offers better support, and provides operational security for commercial projects.
        </AccordionBody>
    </AccordionItem>
</Accordion>

@code {
    bool accordionItem1Visible = true;
    bool accordionItem2Visible = false;
    bool accordionItem3Visible = false;
}

Animation

Set Animated="false" for immediate transitions, or use AnimationDuration to adjust their duration in milliseconds. A duration of zero or less disables transitions. Leaving the duration unset preserves the selected CSS provider's timing.

These settings control panel and toggle transitions where supported. Bootstrap 4 and Bootstrap 5 animate panel expansion and collapse, using a default duration of 350 milliseconds. The controls apply to this accordion; nested components keep their own settings.

Adjust the operating settings before starting the next production run. 
<Field>
    <Switch @bind-Value="animated">Animate transitions</Switch>
</Field>
<Field>
    <FieldLabel>Animation duration</FieldLabel>
    <FieldBody>
        <Select TValue="int?" @bind-Value="animationDuration">
            <SelectItem TValue="int?" Value="@((int?)null)">Provider default</SelectItem>
            <SelectItem TValue="int?" Value="0">Immediate</SelectItem>
            <SelectItem TValue="int?" Value="100">100 ms</SelectItem>
            <SelectItem TValue="int?" Value="200">200 ms</SelectItem>
            <SelectItem TValue="int?" Value="400">400 ms</SelectItem>
        </Select>
    </FieldBody>
</Field>

<Accordion Animated="@animated" AnimationDuration="@animationDuration">
    <AccordionItem @bind-Visible="visible">
        <AccordionHeader>
            <AccordionToggle>Machine settings</AccordionToggle>
        </AccordionHeader>
        <AccordionBody>
            Adjust the operating settings before starting the next production run.
        </AccordionBody>
    </AccordionItem>
</Accordion>

@code {
    private bool animated = true;

    private int? animationDuration;

    private bool visible = true;
}

Best Practices

Write Clear Headers

Use short, descriptive headers so users can predict what each section contains before opening it. Keep the number of sections manageable, and split long or unrelated content into separate pages when the accordion becomes difficult to scan.

Expansion Behavior

Allow multiple items to stay open when users need to compare information. Single-item expansion works better when the sections form a focused sequence. Essential instructions and error messages should remain visible instead of being hidden inside a collapsed item.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page