Blazor Accordion Overview

    The Ignite UI for Blazor Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and API to control the underlying panels' expansion state.

    Users are enabled to interact and navigate among a list of items, such as thumbnails or labels. Each one of those items can be toggled (expanded or collapsed) in order to reveal the containing information. Depending on the configuration, there can be a single or multiple expanded items at a time.

    Blazor Accordion Example

    The following is a basic Ignite UI for Blazor Accordion example of a FAQ section. It operates as an accordion, with individually working sections. You can toggle each text block with a single click, while expanding multiple panels at the same time. This way you can read information more easily, without having to go back and forth between an automatically expanding and collapsing panel, which conceals the previously opened section every time.

    In it, you can see how to define an accordion and its expansion panels. The sample also demonstrates the two types of expansion behavior. The switch button sets the SingleExpand property to toggle between single and multiple branches to be expanded at a time.

    Getting Started with Blazor Accordion

    Before using the IgbAccordion, you need to register it as follows:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));

    You will also need to link an additional CSS file to apply the styling to the IgbAccordion component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Now you can start with a basic configuration of the IgbAccordion and its panels.

    Usage

    Each section in the Blazor Accordion Component is defined using an Blazor Expansion Panel. Panels provide Disabled and Open properties, which give you the ability to configure the states of the panel as per your requirement.

    Declaring an Accordion

    The accordion wraps all expansion panels declared inside it.

    <IgbAccordion SingleExpand=true>
    <IgbExpansionPanel>
        <div slot="title">Title Panel 1</div>
        <div>
            Content Panel 1
        </div>
    </IgbExpansionPanel>
    <IgbExpansionPanel>
        <div slot="title">Title Panel 2</div>
        <div>
            Content Panel 2
        </div>
    </IgbExpansionPanel>
</IgbAccordion>

    As demonstrated above, the SingleExpandproperty gives you the ability to set whether single or multiple panels can be expanded at a time.

    By using the HideAll and ShowAll methods you can respectively collapse and expand all IgbExpansionPanels of the IgbAccordion programmatically.

    [!Note] If SingleExpand property is set to true calling ShowAll method would expand only the focused panel.

    Blazor Accordion Customization Example

    With the Blazor Accordion, you can customize the header and content panel's appearance.

    The sample below demonstrates how elaborate filtering options can be implemented using the built-in slots of the IgbExpansionPanel.

    Nested Blazor Accordions Scenario

    In the following Blazor Accordion example is created a complex FAQ section in order to illustrate how you can go about this common application scenario. In the sample nested IgbAccordion is achieved by adding an accordion inside an expansion panel.

    Keyboard Navigation

    Keyboard navigation in the Blazor Accordion provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the panels.

    The Accordion navigation is compliant with W3C accessibility standards and convenient to use.

    Key Combinations

    • ↓ - moves the focus to the panel below
    • ↑ - moves the focus to the panel above
    • Alt + ↓ - opens the focused panel in the accordion
    • Alt + ↑ - closes the focused panel in the accordion
    • Shift + Alt + ↓ - opens all enabled panels (if singleExpand is set to true opens the focused panel)
    • Shift + Alt + ↑ - closes all enabled panels
    • Home - navigates to the FIRST enabled panel in the accordion
    • End - navigates to the LAST enabled panel in the accordion

    API References

    Additional Resources