Syncfusion TypeScript Accordion

The Accordion is a vertically collapsible content panel component that displays one or more expandable/collapsible panels. It supports single or multiple expand modes, custom animations, icons, templates, and data binding.

When to Use This Skill

Use this skill when your user needs to:

• Build responsive accordion menus for navigation
• Create expandable content sections to reduce page height
• Implement multi-step wizards or forms with validation
• Display hierarchical data in collapsible panels
• Customize accordion appearance with icons, animations, and styling
• Load accordion content dynamically from data sources or AJAX
• Integrate accordion with other components (TreeView, forms, etc.)
• Create complex UI patterns like shopping cart steps or FAQ sections

Navigation and Documentation Guide

📚 Documentation Structure

The skill is organized into focused reference files covering different aspects:

Fundamentals

📄 Getting Started

• Installation and setup with npm packages
• Items array initialization
• HTML markup initialization
• CSS imports and theme configuration
• Basic working examples

📄 Expand Modes

• Single vs Multiple expand modes
• Expand behavior and toggling
• Initial expanded state
• When to use each mode
• Common workflow patterns

Customization & Styling

📄 Customization and Styling

• CSS customization guide and selectors
• Header, item, and content styling
• Icon integration (built-in and Font Awesome)
• Animation effects and timing
• Hover states and selected item styling

Data & Content

📄 Data Loading and Content

• Dynamic item loading
• Items array approach
• DataSource binding approach
• AJAX content loading
• Nested accordions
• TreeView integration

📄 Templates

• Header templates
• Item templates
• Template data binding
• Dynamic template switching
• Performance optimization

Advanced Topics

📄 Advanced Features

• All methods (addItem, removeItem, enableItem, expandItem, hideItem, select, refresh, etc.)
• All events (expanding, expanded, clicked, created, destroyed)
• Event arguments and properties
• State management
• Event listeners
• RTL support and accessibility

📄 Advanced Use Cases

• Multi-step form wizards
• Conditional validation workflows
• Shopping cart checkout flow
• Progress tracking
• Best practices

Complete Reference

📄 API Reference ⭐ START HERE FOR COMPLETE API

• All properties documented with types and defaults
• All methods with parameters and examples
• All events and event arguments
• Animation configuration
• Complete code examples

Quick Start Example

import { Accordion } from '@syncfusion/ej2-navigations';

// Initialize Accordion with items array
const accordion = new Accordion({
    items: [
        { 
            header: 'Getting Started', 
            content: 'Learn the basics of Accordion component',
            expanded: true 
        },
        { 
            header: 'Features', 
            content: 'Explore rich features like templates and data binding' 
        },
        { 
            header: 'API Reference', 
            content: 'Complete list of properties, events, and methods' 
        }
    ],
    // Use animation object, not enableAnimation boolean
    animation: {
        expand: { effect: 'SlideDown', duration: 400, easing: 'ease-in' },
        collapse: { effect: 'SlideUp', duration: 400, easing: 'ease-out' }
    }
});

accordion.appendTo('#accordion-element');

Common Patterns

Pattern 1: Single Open Panel (Tabs-like Behavior)

const accordion = new Accordion({
    expandMode: 'Single',
    items: [
        { header: 'Tab 1', content: 'Content 1', expanded: true },
        { header: 'Tab 2', content: 'Content 2' },
        { header: 'Tab 3', content: 'Content 3' }
    ]
});

Pattern 2: Multiple Open Panels

const accordion = new Accordion({
    expandMode: 'Multiple',  // Default
    items: [
        { header: 'Section A', content: 'Content A', expanded: true },
        { header: 'Section B', content: 'Content B', expanded: true },
        { header: 'Section C', content: 'Content C' }
    ]
});

Pattern 3: Accordion with Icons

const accordion = new Accordion({
    items: [
        { 
            header: 'Sports', 
            iconCss: 'e-sports e-acrdn-icons',
            content: 'Athletic activities content'
        },
        { 
            header: 'Games', 
            iconCss: 'e-games e-acrdn-icons',
            content: 'Gaming activities content'
        }
    ]
});

Pattern 4: Dynamically Manage Items

const accordion = new Accordion({
    items: [...],
    created: (args) => {
        // Disable item at index 2 initially
        accordion.enableItem(2, false);
        
        // After some action, enable it
        setTimeout(() => {
            accordion.enableItem(2, true);
        }, 2000);
    }
});

Key Properties

Property	Type	Default	Description
items	AccordionItem[]	[]	Array of accordion items with header, content, and options
dataSource	object[] | DataManager	-	External data source (items array, OData, JSON, AJAX)
expandMode	'Single' | 'Multiple'	'Multiple'	Single or Multiple expand mode
headerTemplate	string	-	Custom HTML template for item headers
itemTemplate	string	-	Custom HTML template for entire items
expandedIndices	number[]	[]	Indices of items to expand initially
animation	AnimationSettings	{expand: {}, collapse: {}}	Animation with effect, duration, easing
height	string | number	auto	Height of accordion container
width	string | number	100%	Width of accordion container
enableRtl	boolean	false	Right-to-left text direction
enablePersistence	boolean	false	Persist expanded state in localStorage
enableHtmlSanitizer	boolean	true	Sanitize HTML for security

Essential Imports

// Main component
import { Accordion } from '@syncfusion/ej2-navigations';

// Optional: Enable ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

// CSS styles (choose one theme)
import '@syncfusion/ej2-base/styles/fluent2.css';
import '@syncfusion/ej2-navigations/styles/fluent2.css';

Next Steps

• Explore data binding patterns in Data Loading and Content
• Learn template syntax in Templates for custom UI
• Implement form wizards in Advanced Use Cases
• Check Advanced Features for event handling and state management