Open Source

Accordion Component

The Ignite UI for Angular Accordion is a layout component for organizing expandable content panels in a single vertical container.

Live Demo

Anatomy

The accordion structure consists of an accordion container with one or more expansion panel children.

1. Header: displays the section title and description and can be clicked to reveal or hide the panel’s content
2. Icon: indicates if the panel is open or closed. Could be placed on the left or on the right side of the header
3. Panel: the section of content linked to an accordion header

igx-accordion                         // host - manages a set of expansion panels
└─ igx-expansion-panel                 // child panel
   ├─ igx-expansion-panel-header       // panel header container
   │  ├─ igx-expansion-panel-title     // panel header title
   │  ├─ igx-expansion-panel-description // optional header description
   │  └─ igx-expansion-panel-icon      // optional custom expand/collapse icon
   └─ igx-expansion-panel-body         // expandable panel content

Getting Started

Use the accordion with the Ignite UI for Angular version installed in your Angular application. Complete the shared Getting Started topic before importing the standalone accordion directives.

Import the standalone accordion directives before you use the component.

import { Component } from '@angular/core';
import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion';

@Component({
  selector: 'app-accordion',
  imports: [IGX_ACCORDION_DIRECTIVES],
  templateUrl: './accordion.component.html',
})
export class AccordionComponent {}

Usage

Build the accordion by placing one or more ExpansionPanel components inside an Accordion container.

Single Expansion

Set singleBranchExpand to switch between one-open-panel behavior and multiple-open-panel behavior.

<igx-accordion [singleBranchExpand]="true">
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <p>Content Panel 1</p>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <p>Content Panel 2</p>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
</igx-accordion>

Programmatic Expansion

Use collapseAll() and expandAll() to collapse or expand the accordion panels programmatically.

Calling expandAll() expands only the last enabled panel when singleBranchExpand is true.

<button type="button" (click)="accordion.expandAll()">Show All</button>
<button type="button" (click)="accordion.collapseAll()">Hide All</button>

<igx-accordion #accordion>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <p>Content Panel 1</p>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <p>Content Panel 2</p>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
</igx-accordion>

Customize Panel Content

Customize panel headers with title and description elements, and place expandable content inside the panel body.

<igx-accordion>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Billing</igx-expansion-panel-title>
      <igx-expansion-panel-description>Payment and invoice settings</igx-expansion-panel-description>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <p>Update payment methods, billing contacts, and invoice delivery options.</p>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
</igx-accordion>

Nest Accordions

Nest an accordion inside an expansion panel when you need a second level of grouped disclosure.

<igx-accordion>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Account Settings</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <igx-accordion>
        <igx-expansion-panel>
          <igx-expansion-panel-header>
            <igx-expansion-panel-title>Notifications</igx-expansion-panel-title>
          </igx-expansion-panel-header>
          <igx-expansion-panel-body>
            <p>Configure email and product notification preferences.</p>
          </igx-expansion-panel-body>
        </igx-expansion-panel>
      </igx-accordion>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
</igx-accordion>

Do/Don’t

When to use: Use the accordion when you need to organize secondary content, FAQ entries, settings groups, or other related vertical sections that users expand on demand. Keep panel titles short and descriptive, and enable single-expansion behavior when users should focus on one section at a time.

When not to use: Use the Expansion Panel when you need a single standalone expandable section instead of a coordinated container that manages multiple panels together. Do not use an accordion to hide essential primary content or to group unrelated sections.

Do	Don’t

Properties

The accordion exposes container-level controls; panel-specific state is configured on each ExpansionPanel.

Name	Type	Default	Description
`singleBranchExpand`	`boolean`	`false`	Controls whether one or multiple panels can stay expanded at the same time.
`panels`	`QueryList<IgxExpansionPanelComponent>`	n/a	Returns the collection of child expansion panels in the accordion.

Methods

Use the accordion methods when you need to change panel state from your code.

Name	Description
`expandAll`	Expands the available panels.
`collapseAll`	Collapses the available panels.

Styling

Style the Angular accordion with CSS parts and Ignite UI theme variables.

Sass Theming

Use the expansion-panel-theme function to create a custom expansion panel theme, then include the generated tokens in the component stylesheet.

@use "igniteui-angular/theming" as *;

$custom-panel-theme: expansion-panel-theme(
  $header-background: #011627,
  $body-background: #f0ece7,
  $expanded-margin: 10px
);

:host {
  @include tokens($custom-panel-theme);
}

Styling Variables

Variable	What it changes
`$header-background`	The panel header background color.
`$header-focus-background`	The panel header background color when focused.
`$header-title-color`	The panel header title text color.
`$header-description-color`	The panel header description text color.
`$header-icon-color`	The panel header icon color.
`$body-background`	The panel body background color.
`$body-color`	The panel body text color.
`$expanded-margin`	The margin applied to expanded panels when they are placed inside an accordion.
`$border-radius`	The expansion panel border radius.

Styling with Tailwind

Use Tailwind utility classes with CSS part selectors when you want to keep the styling close to the component markup.

Accessibility

The accordion supports keyboard interaction for moving focus between panels and changing their expanded state.

Keyboard Interaction

Use the keyboard shortcuts below to move through the accordion and open or close panels.

Key	Action
`Down Arrow`	Moves focus to the panel below.
`Up Arrow`	Moves focus to the panel above.
`Alt` + `Down Arrow`	Opens the focused panel.
`Alt` + `Up Arrow`	Closes the focused panel.
`Shift` + `Alt` + `Down Arrow`	Opens all enabled panels. If `singleBranchExpand` is `true`, opens the last enabled panel.
`Shift` + `Alt` + `Up Arrow`	Closes all enabled panels.
`Home`	Moves focus to the first enabled panel.
`End`	Moves focus to the last enabled panel.

Screen Readers / ARIA

The accordion’s accessibility semantics are provided through its child expansion panels and their headers.

Each panel header exposes role="button", aria-expanded, and aria-controls.
Each panel body exposes role="region" and a label through aria-labelledby or aria-label.
Use clear title text for each panel so assistive technologies can announce a meaningful label.
Keep interactive content inside panel bodies in a logical tab order.

Accessibility Compliance

Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the Accessibility Compliance topic. The accordion’s compliance evidence comes from the child ExpansionPanel components that provide the interactive headers and regions.

Criterion	How the component complies
2.1.1 Keyboard	The accordion supports keyboard commands for moving focus and opening or closing panels.
2.4.3 Focus Order	Focus moves through enabled panels in sequence, with shortcuts for jumping to the first and last panel.

Your responsibilities:

Provide panel titles that describe the content behind each disclosure area.
Preserve a logical focus order in the surrounding page layout.
Validate any custom styling against your application’s contrast and focus-indicator requirements.

API References

Dependencies

The accordion depends on ExpansionPanel for its visible sections.

Additional Resources

Use these resources to continue with Ignite UI for Angular Accordion support, source, and related layout guidance.

Expansion Panel - The collapsible section the accordion is built from. See it for configuring individual panels.

FAQ

Should multiple accordion panels be open at the same time?

Allow multiple panels to stay open when users need to compare or cross-reference their content. Use single-expansion behavior when the workflow is clearer with one active section at a time.

When should I avoid using an accordion?

Avoid using an accordion for essential, long, or comparison-heavy content that users need to read at once. Use clear headings, a separate page, or another layout when hiding the content would make it harder to find or compare.

How should I write accordion headers?

Use short, descriptive headers that clearly identify the content revealed by each panel. Users should be able to scan the headers and decide which section to open.

Can an accordion header contain other buttons or links?

Avoid placing other interactive controls inside an accordion header. Keep secondary actions outside the header so the panel trigger remains clear and does not contain nested interactive elements.