Expand and Collapse Modes

Either by clicking the panel header or programmatically, one or more panels can be expanded or collapsed at once. Each panel can also be collapsed individually. With customization options, one panel can be configured to be open while the others are collapsed.

Icon Support

Prefix icons or images can be added to the panel header. It's possible to customize the header's default expand-collapse icon. Icons are rendered by mapping the iconCss field.

Built-in Themes

The React Accordion component ships with various built-in themes. By simply overriding SASS variables or by utilizing our Theme Studio application, users can customize any of these built-in themes or create new ones.


Panel expanding and collapsing actions are supported by a variety of built-in animations with React collapsible panels. And animation behavior can be customized.

Syncfusion React Accordion

The Syncfusion React JS UI components library is the only suite you will ever need to build an application. It offers over 80+ high-performance, lightweight, modular, and responsive UI components in a single package.