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 setu

Implementing Syncfusion React Accordion 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 Documentation and Navigation Guide Getting Started 📄 Read: [references/getting started.md](references/getting started.md) When to read: First time setting up the Accordion component Package installation (@syncfusion/ej2 react navigations) CSS imports and theme configuration (Tailwind, Bootstrap) Two initialization methods (Items API vs HTML markup) Item configuration (header, content, cssClass, disabled, expanded) Basic component setup with examples First render and minimal working example Expand Modes 📄 Read: [references/expand modes.md](references/expand modes.md) When to read: Controlling which panels expand at the same time Single expand mode (only one panel open at a time) Multiple expand mode (default, many panels can be open) Setting initial expanded state with expandedIndices property Toggle behavior on header click Use cases for choosing each mode Keeping single pane open always pattern Animation Effects 📄 Read: [references/animation effects.md](references/animation effects.md) When to read: Customizing panel transitions and visual effects Default animations (SlideDown for expand, SlideUp for collapse) Choosing from available animation effects (FadeIn, ZoomIn, etc.) Configuring easing and duration properties Separate expand/collapse animation control Disabling animations entirely Performance considerations Content Loading 📄 Read: [references/content loading.md](references/content loading.md) When to read: Loading content dynamically or from external sources Loading accordion items dynamically with addItem() method Loading content from data sources (dataSource property) Fetching content via HTTP requests and POST Template based rendering (headerTemplate, itemTemplate) Rendering other React components inside panels Lazy loading and deferred content patterns Events & Lifecycle 📄 Read: [references/events lifecycle.md](references/events lifecycle.md) When to read: Handling user interactions and component lifecycle Component lifecycle events (created, destroyed) Expand/collapse events (expanding, expanded) Click event handling (clicked) Event arguments and properties Preventing default actions with event.cancel Real world event patterns and examples Styling & Customization 📄 Read: [references/styling customization.md](references/styling customization.md) When to read: Customizing appearance and integrating with design systems CSS classes for styling (header, panel, content areas) Built in theme options and theme switching Custom styling with CSS and utilities (Tailwind, Bootstrap) RTL (right to left) support Responsive design patterns Using cssClass property for custom styling Advanced Features 📄 Read: [references/advanced features.md](references/advanced features.md) When to read: Building complex layouts and optimizing performance Component methods (expandItem, enableItem, hideItem, etc.) Nested accordions and hierarchical structures React hooks integration (useState, useRef, useEffect) Keyboard navigation behavior 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: Common Patterns Pattern 1: FAQ Section (Single Expand Mode) Questions automatically collapse when a new one is opened: Pattern 2: Persistent Expansion (Multiple Mode) All panels can remain expanded simultaneously: Pattern 3: Default Expanded State Pre expand specific panels on load: Key Props & Methods Component Properties Property Type Purpose Default expandMode 'Single' \ 'Multiple' Control single/multiple panel expansion 'Multiple' expandedIndices number[] Array of indices for initially expanded items [] animation AnimationSettings Expand/collapse animation config SlideDown/SlideUp dataSource Object[] Array of items for data binding [] headerTemplate string \ function Custom header template for all items null itemTemplate string \ function Custom item template for rendering null height string \ number Component height in px/% 'auto' width string \ number Component width in px/% '100%' enableHtmlSanitizer boolean Sanitize untrusted HTML content true enablePersistence boolean Persist expanded state between reloads false enableRtl boolean Enable right to left layout false locale string Locale code for internationalization '' Item Properties Property Type Purpose Default header string Item header text (accepts HTML) content string Item content text (accepts HTML) expanded boolean Set initial expanded state for item false disabled boolean Disable specific accordion item false cssClass string Custom CSS classes for item Component Methods Method Parameters Purpose addItem() item, index (optional) Add new accordion item(s) removeItem() index Remove item at specified index enableItem() index, isEnable Enable/disable specific item hideItem() index, isHidden Show/hide specific item expandItem() isExpand, index (optional) Expand/collapse items select() index Set focus to item header destroy() none Remove component from DOM Common Use Cases Use Case Mode Key Feature FAQ Section Single Only one question visible at a time Settings Panel Multiple Check multiple options simultaneously Multi Step Form Single Guide user through steps sequentially Content Organizer Multiple Browse multiple topics at once Navigation Menu Single Tree like hierarchical navigation Data Dashboard Multiple View multiple data sections together Next Steps 1. Start with Getting Started to set up your first Accordion 2. Choose Expand Mode based on your use case 3. Add Animations for polish and user feedback 4. Load Content Dynamically if using data sources 5. Customize Styling to match your design system 6. Explore Advanced Features for complex scenarios Need help? Check the specific reference files above based on what you're trying to build!

syncfusion-react-accordion