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 and Collapse structure is very simple:

  • <Accordion> the main container
    • <Collapse> defines an collapsible element - controls the Visible state.
      • <CollapseHeader> 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 collapse components.
      • <CollapseBody> the main content that will be toggled.

Examples

Basic

Here is an example of how to use the Accordion with the Collapse components.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<Accordion>
    <Collapse Visible="@collapse1Visible">
        <CollapseHeader>
            <Heading Size="HeadingSize.Is5">
                <AccordionToggle>Switch 1</AccordionToggle>
            </Heading>
        </CollapseHeader>
        <CollapseBody>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </CollapseBody>
    </Collapse>
    <Collapse Visible="@collapse2Visible">
        <CollapseHeader>
            <Heading Size="HeadingSize.Is5">
                <AccordionToggle>Switch 2</AccordionToggle>
            </Heading>
        </CollapseHeader>
        <CollapseBody>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </CollapseBody>
    </Collapse>
    <Collapse Visible="@collapse3Visible">
        <CollapseHeader>
            <Heading Size="HeadingSize.Is5">
                <AccordionToggle>Switch 3</AccordionToggle>
            </Heading>
        </CollapseHeader>
        <CollapseBody>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </CollapseBody>
    </Collapse>
</Accordion>

@code {
    bool collapse1Visible = true;
    bool collapse2Visible = false;
    bool collapse3Visible = 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

Collapse

Name Description Type Default
Visible Defines the collapse visibility. bool false
ChildContent Specifies the content to be rendered insidethe collapse. RenderFragment null
On this page