syncfusion-aspnetcore-accordion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Accordion

实现Syncfusion Accordion组件

When to Use This Skill

适用场景

use this skill when users need to:

Organize content into collapsible sections
Build FAQ or help sections with expandable items
Create tabbed-like navigation with accordion panes
Implement progressive disclosure of content
Build hierarchical nested accordion structures
Configure single or multiple expand modes
Load accordion content dynamically from data sources
Customize accordion animations and interactions
Integrate accordion with ASP.NET Core applications

The Accordion component is the ideal choice whenever you need vertically stacked, collapsible content panels that display one or more panels at a time.

当用户需要以下功能时使用本技能：

将内容组织为可折叠区域
构建带有可展开项的FAQ或帮助板块
创建类似标签页的Accordion面板导航
实现内容的渐进式展示
构建层级嵌套的Accordion结构
配置单个或多个展开模式
从数据源动态加载Accordion内容
自定义Accordion的动画和交互效果
在ASP.NET Core应用中集成Accordion

Accordion组件是垂直堆叠、可折叠内容面板的理想选择，支持同时显示一个或多个面板。

Component Overview

组件概述

The Syncfusion Accordion is a vertically collapsible content panel control that:

Supports Single and Multiple expand modes
Handles static items and data-bound content
Enables nested accordion structures for hierarchical content
Provides animation configuration for expand/collapse actions
Fires lifecycle events (created, expanding, expanded, collapsing, collapsed, clicked)
Supports content loading from partial views or via POST requests
Allows programmatic control through public methods like
```
expandItem()
```
Maintains state persistence across page reloads
Provides RTL support and HTML sanitization

Syncfusion Accordion是一款垂直可折叠的内容面板控件，具备以下特性：

支持Single和Multiple展开模式
支持静态项和数据绑定内容
允许为层级内容创建嵌套Accordion结构
提供展开/折叠操作的动画配置
触发生命周期事件（created、expanding、expanded、collapsing、collapsed、clicked）
支持从局部视图或通过POST请求加载内容
允许通过
```
expandItem()
```
等公共方法进行程序化控制
在页面刷新后保持状态持久化
提供RTL支持和HTML内容清理

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

System prerequisites and NuGet package installation
TagHelper registration for ASP.NET Core
Stylesheet and script resource configuration
Creating your first Accordion control
Understanding AccordionItem structure and markup patterns

📄 阅读： references/getting-started.md

系统先决条件和NuGet包安装
ASP.NET Core的TagHelper注册
样式表和脚本资源配置
创建第一个Accordion控件
理解AccordionItem的结构和标记模式

Expand Modes & Behavior

展开模式与行为

📄 Read: references/expand-modes.md

Single expand mode: mutually exclusive item expansion
Multiple expand mode: independent item expansion (default)
Toggle behavior and user interactions
Keeping a single pane open always
Expand mode configuration examples

📄 阅读： references/expand-modes.md

单面板展开模式：互斥的项展开
多面板展开模式：独立的项展开（默认）
切换行为和用户交互
始终保持一个面板处于展开状态
展开模式配置示例

Data Binding & Dynamic Content

数据绑定与动态内容

📄 Read: references/data-binding.md

Static item binding with AccordionItem elements
DataSource property and dynamic data binding
OData service integration with DataManager
Mapping header and content properties from data
Handling complex data structures

📄 阅读： references/data-binding.md

使用AccordionItem元素进行静态项绑定
DataSource属性与动态数据绑定
DataManager与OData服务集成
从数据中映射标题和内容属性
处理复杂数据结构

Advanced Content Loading

高级内容加载

📄 Read: references/content-loading.md

Loading content from partial views
Lazy loading strategies for performance
Dynamic content rendering and updates
POST-based content requests
Content refresh and state management

📄 阅读： references/content-loading.md

从局部视图加载内容
用于性能优化的懒加载策略
动态内容渲染与更新
基于POST的内容请求
内容刷新与状态管理

Customization & Animation

自定义与动画

📄 Read: references/customization-animation.md

Configuring expand/collapse animations
Animation settings: effect, duration, easing
Event handling: expanding, expanded, collapsing, collapsed
Programmatic expand/collapse with
```
expandItem()
```
method
Advanced interaction patterns and sequential operations

📄 阅读： references/customization-animation.md

配置展开/折叠动画
动画设置：效果、时长、缓动函数
事件处理：expanding、expanded、collapsing、collapsed
使用
```
expandItem()
```
方法进行程序化展开/折叠
高级交互模式与顺序操作

Nested Accordion Structures

嵌套Accordion结构

📄 Read: references/nested-accordion.md

Creating multi-level accordion hierarchies
Referencing nested accordion elements
Content element ID references
Performance considerations at scale

📄 阅读： references/nested-accordion.md

创建多级Accordion层级结构
引用嵌套Accordion元素
内容元素ID引用
大规模场景下的性能考量

Complete API Reference

完整API参考

📄 Read: api-reference.md

All properties, methods, and events available
AccordionItem configuration options
Animation settings and event arguments
Non-duplicative reference to skill files for detailed guidance

📄 阅读： api-reference.md

所有可用的属性、方法和事件
AccordionItem配置选项
动画设置与事件参数
详细指南的技能文件非重复引用

Quick Start Example

快速入门示例

cshtml

<!-- Add Accordion in your Razor page -->
<div class="control_wrapper accordion-control-section">
    <ejs-accordion id="myAccordion" expand-mode="Multiple">
        <e-accordion-accordionitems>
            <e-accordion-accordionitem expanded="true" 
                header="Getting Started" 
                content="Learn the basics of Accordion component integration">
            </e-accordion-accordionitem>
            <e-accordion-accordionitem 
                header="Features" 
                content="Explore expand modes, data binding, and customization options">
            </e-accordion-accordionitem>
            <e-accordion-accordionitem 
                header="Advanced Topics" 
                content="Discover nested accordions, animations, and event handling">
            </e-accordion-accordionitem>
        </e-accordion-accordionitems>
    </ejs-accordion>
</div>

This creates a basic accordion with three items, the first one expanded by default.

cshtml

<!-- Add Accordion in your Razor page -->
<div class="control_wrapper accordion-control-section">
    <ejs-accordion id="myAccordion" expand-mode="Multiple">
        <e-accordion-accordionitems>
            <e-accordion-accordionitem expanded="true" 
                header="Getting Started" 
                content="Learn the basics of Accordion component integration">
            </e-accordion-accordionitem>
            <e-accordion-accordionitem 
                header="Features" 
                content="Explore expand modes, data binding, and customization options">
            </e-accordion-accordionitem>
            <e-accordion-accordionitem 
                header="Advanced Topics" 
                content="Discover nested accordions, animations, and event handling">
            </e-accordion-accordionitem>
        </e-accordion-accordionitems>
    </ejs-accordion>
</div>

此示例创建了一个包含三个项的基础Accordion，默认展开第一个项。

Common Patterns

常见模式

FAQ Section with Single Expand Mode

单面板展开模式的FAQ板块

Use

Single

expand mode when only one FAQ answer should be visible at a time:

cshtml

<ejs-accordion expand-mode="Single">

当一次仅应显示一个FAQ答案时，使用

Single

展开模式：

cshtml

<ejs-accordion expand-mode="Single">

Documentation with Multiple Panels Open

支持多面板同时展开的文档

Use

Multiple

expand mode (default) to allow readers to compare multiple sections simultaneously.

使用默认的

Multiple

展开模式，允许读者同时对比多个章节。

Dynamic Content Loading

动态内容加载

Bind accordion items to a DataSource for dynamic content:

cshtml

<ejs-accordion data-source="Model.AccordionItems">

将Accordion项绑定到DataSource以实现动态内容：

cshtml

<ejs-accordion data-source="Model.AccordionItems">

Keeping One Panel Always Open

始终保持一个面板展开

In Single mode, configure the

expanding

event to prevent the last open item from being collapsed.

在单面板模式下，配置

expanding

事件以防止最后一个展开的项被折叠。

Key Properties

关键属性

Property	Type	Default	Purpose
`expandMode`	`Single` \| `Multiple`	`Multiple`	Controls whether one or multiple items can be expanded simultaneously
`items`	`AccordionItemModel[]`	`[]`	Array of accordion items to display
`dataSource`	`Object[]`	`[]`	Binds dynamic data to accordion items
`expandedIndices`	`number[]`	`[]`	Specifies which items are expanded on initial load
`height`	`string` \| `number`	`auto`	Sets accordion container height
`width`	`string` \| `number`	`100%`	Sets accordion container width
`animation`	`AccordionAnimationSettingsModel`	Configured	Customizes expand/collapse animations
`enablePersistence`	`boolean`	`false`	Persists expanded state across page reloads
`enableHtmlSanitizer`	`boolean`	`true`	Sanitizes untrusted HTML content

属性	类型	默认值	用途
`expandMode`	`Single` \| `Multiple`	`Multiple`	控制是否允许同时展开一个或多个项
`items`	`AccordionItemModel[]`	`[]`	要显示的Accordion项数组
`dataSource`	`Object[]`	`[]`	为Accordion项绑定动态数据
`expandedIndices`	`number[]`	`[]`	指定初始加载时展开的项
`height`	`string` \| `number`	`auto`	设置Accordion容器高度
`width`	`string` \| `number`	`100%`	设置Accordion容器宽度
`animation`	`AccordionAnimationSettingsModel`	已配置	自定义展开/折叠动画
`enablePersistence`	`boolean`	`false`	在页面刷新后保留展开状态
`enableHtmlSanitizer`	`boolean`	`true`	清理不可信HTML内容

When to Use Each Expand Mode

各展开模式的适用场景

Single Mode: Use when content is mutually exclusive or only one section should be visible at once (e.g., step-by-step wizards, radio button-like behavior).

Multiple Mode: Use when users need to view multiple sections simultaneously (e.g., FAQ sections, documentation, feature lists).

Next Steps: Select a reference file based on your needs, or start with Getting Started for a complete setup walkthrough.

单面板模式：当内容互斥或一次仅应显示一个章节时使用（如分步向导、类似单选按钮的行为）。

多面板模式：当用户需要同时查看多个章节时使用（如FAQ板块、文档、功能列表）。

下一步： 根据需求选择参考文件，或从《快速入门》开始完成完整的设置教程。