Web Components Accordion Overview

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

    Web Components Accordion Example

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

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents

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

    import { defineComponents, IgcAccordionComponent } from 'igniteui-webcomponents';

defineComponents(IgcAccordionComponent);

    For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

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

    Usage

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

    <igc-accordion id="accordion" single-expand="true">
    <igc-expansion-panel>
        <div slot="title">Title Panel 1</div>
        <div>
            Content Panel 1
        </div>
    </igc-expansion-panel>
    <igc-expansion-panel>
        <div slot="title">Title Panel 2</div>
        <div>
            Content Panel 2
        </div>
    </igc-expansion-panel>
</igc-accordion>

    Using the Panels accessor you can get a reference to the collection containing all expansion panels children of the IgcAccordionComponent.

    private accordion: IgcAccordionComponent;
private panels: IgcExpansionPanelComponent[];

constructor() {
	this.accordion = document.getElementById("accordion") as IgcAccordionComponent;
	this.panels = this.accordion.panels;
}

    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 IgcExpansionPanelComponents of the IgcAccordionComponent programmatically.

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

    Web Components Accordion Customization Example

    With the Web Components 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 IgcExpansionPanelComponent.

    Nested Web Components Accordions Scenario

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

    Keyboard Navigation

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