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

Please note the changes starting from 1.5 versions:

Button is obsolete: Placing a regular Button component inside of Accordion is no longer recommended and should be replaced with new <AccordionToggle> component.
Collapse is obsolete: Placing a regular <Collapse> component inside of Accordion is no longer recommended and should be replaced with the new <AccordionHeader>, and <AccordionBody>, <AccordionItem> components.

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`