Guide users to implement Syncfusion React Accordion component for collapsible content panels. Use this skill whenever the user needs to create expandable/collapsible sections, accordion layouts, tabbed content panels, multi-step forms, FAQs, or navigation with expandable items. Covers component setup, expand modes, animations, dynamic content loading, styling, events, lifecycle, React hooks integration, and complete API reference.
Guide users to implement Syncfusion React Accordion component for collapsible content panels. Use this skill whenever the user needs to create expandable/collapsible sections, accordion layouts, tabbed content panels, multi-step forms, FAQs, or navigation with expandable items. Covers component setup, expand modes, animations, dynamic content loading, styling, events, lifecycle, React hooks integration, and complete API reference.
The React Accordion component provides a clean, organized way to display content in collapsible panels. It's perfect for creating expandable content sections, FAQs, multi-step forms, and navigation menus with minimal code.
Component Overview
The Accordion component renders a stack of collapsible panels where:
Each panel has a header (clickable to toggle) and content area
Headers can be simple text or custom templates
Content can be static, dynamic, or rendered from other React components
Supports single expand mode (one panel at a time) or multiple (many panels at once)
Built-in animations for smooth expand/collapse transitions
Full keyboard navigation and accessibility support
Accessibility features (ARIA attributes, screen readers)
Performance optimization for large accordion lists
Custom expand/collapse action patterns
Quick Start Example
Basic accordion with three collapsible panels:
importReactfrom'react';
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from'@syncfusion/ej2-react-navigations';
import'@syncfusion/ej2-base/styles/tailwind3.css';
import'@syncfusion/ej2-buttons/styles/tailwind3.css';
import'@syncfusion/ej2-popups/styles/tailwind3.css';
import'@syncfusion/ej2-react-navigations/styles/tailwind3.css';
exportdefaultfunctionApp() {
return (
<AccordionComponentexpandMode='Multiple'><AccordionItemsDirective><AccordionItemDirectiveheader='HTML'content='HTML is a markup language used to create web pages.'
/><AccordionItemDirectiveheader='CSS'content='CSS is used to style HTML elements and create layouts.'
/><AccordionItemDirectiveheader='JavaScript'content='JavaScript adds interactivity to web applications.'
/></AccordionItemsDirective></AccordionComponent>
);
}
Common Patterns
Pattern 1: FAQ Section (Single Expand Mode)
Questions automatically collapse when a new one is opened:
<AccordionComponent expandMode='Single'>
<AccordionItemsDirective><AccordionItemDirectiveheader='What is React?'content='React is a JavaScript library for building UIs with components.' /><AccordionItemDirectiveheader='What is JSX?'content='JSX is a syntax extension for writing HTML-like code in JavaScript.' /></AccordionItemsDirective>
</AccordionComponent>
