Blazorise Accordion component

An accordion allows users to toggle the display of sections of content.

Overview

Accordion is a vertically stacked set of expandable panels. It reduces clutter and helps maintain the user's focus by showing only the relevant content at any time.

Structure

The Accordion structure is very simple:

  • <Accordion> the main container
    • <AccordionItem> defines a collapsible element - controled by the Visible state.
      • <AccordionHeader> the header that will always be shown - this is where you would put a toggle element (such as a Button).
        • <AccordionToggle> The specialized button used to toggle the state of accordion and the accordion item components.
      • <AccordionBody> the main content if the accordion item.

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;
}

API

Attributes

Accordion

Name Description Type Default
ChildContent Specifies the content to be rendered insidethe accordion. RenderFragment null

AccordionToggle

Name Description Type Default
Clicked Occurs when the toggle button is clicked. EventCallback<MouseEventArgs> null
ChildContent Specifies the content to be rendered insidethe accordion toggle. RenderFragment null

AccordionItem

Name Description Type Default
Visible Defines the collapse state of the accordion item. bool false
VisibleChanged Occurs when the accordion item visibility state changes. EventCallback<bool>
ChildContent Specifies the content to be rendered inside the accordion item. RenderFragment null

AccordionHeader

Name Description Type Default
Clicked Occurs when the accordion header is clicked. EventCallback<MouseEventArgs>
ChildContent Specifies the content to be rendered inside the accordion body. RenderFragment null

AccordionBody

Name Description Type Default
ChildContent Specifies the content to be rendered inside the accordion body. RenderFragment null
On this page