syncfusion-javascript-accordion

Q: How do I install syncfusion-javascript-accordion?

Run npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-accordion in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-javascript-accordion/ (personal) or .claude/skills/syncfusion-javascript-accordion/ (project).

by syncfusionFrontend & Design

Build collapsible navigation panels with the Syncfusion TypeScript Accordion component. Use this skill when implementing vertical accordion menus, expanding/collapsing content panels, multi-step wizards, data-driven panels with dynamic content, tabbed navigation alternatives, or nested hierarchical content structures. Covers initialization, expand modes, animations, icons, templates, styling, data binding, and advanced use cases like form wizards.

Installs: 57
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-accordion

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-javascript-accordion automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the syncfusion-javascript-accordion skill do?

How do I install syncfusion-javascript-accordion?

Run npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-accordion in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-javascript-accordion/ (personal) or .claude/skills/syncfusion-javascript-accordion/ (project).

Which AI agents can use syncfusion-javascript-accordion?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-javascript-accordion safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-javascript-accordion?

It is published by syncfusion in syncfusion/javascript-ui-controls-skills. It has 57 recorded installs.