React Accordion Overview

The Ignite UI for React 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.

React Accordion Example

The following is a basic Ignite UI for React 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 React Accordion

First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

You will then need to import the IgrAccordion and the IgrExpansionPanel, its necessary CSS, and register its module, like so:

import {
  IgrAccordion,
  IgrAccordionModule,
  IgrExpansionPanel,
  IgrExpansionPanelModule,
} from "igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

IgrAccordionModule.register();
IgrExpansionPanelModule.register();

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

Usage

Each section in the React Accordion Component is defined using an React 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.

<IgrAccordion singleExpand={true}>
  <IgrExpansionPanel>
    <div slot="title">Title Panel 1</div>
    <div>Content Panel 1</div>
  </IgrExpansionPanel>
  <IgrExpansionPanel>
    <div slot="title">Title Panel 2</div>
    <div>Content Panel 2</div>
  </IgrExpansionPanel>
</IgrAccordion>

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 IgrExpansionPanels of the IgrAccordion programmatically.

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

React Accordion Customization Example

With the React 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 IgrExpansionPanel.

Nested React Accordions Scenario

In the following React 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 IgrAccordion is achieved by adding an accordion inside an expansion panel.

Keyboard navigation in the React 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