Syncfusion Blazor Accordion

Syncfusion Blazor Accordion Component

The Blazor Accordion is a vertically collapsible content container that displays one or more panels. Each panel consists of a header and expandable content section. It supports single or multiple panel expansion, nested accordions, animations, and is fully accessible with WCAG compliance.

When to Use This Skill

Use this skill when you need to:

• Create collapsible content sections in Blazor applications
• Build FAQ sections with expandable answers
• Implement navigation menus with nested items
• Organize large amounts of content in compact, expandable panels
• Create wizard-like interfaces with sequential steps
• Display hierarchical data with nested accordions
• Implement accessible collapsible components with keyboard navigation
• Configure expand/collapse animations and behavior
• Bind dynamic data to accordion items
• Customize accordion appearance and styling

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installing Syncfusion.Blazor.Navigations NuGet package
• Namespace imports and service registration
• Adding theme and script references
• Creating your first accordion with basic items
• Implementing accordions using templates (HeaderTemplate, ContentTemplate)

Expand Modes and Behavior

📄 Read: references/expand-modes.md

• Single expand mode (only one panel open at a time)
• Multiple expand mode (multiple panels can be open)
• Configuring initial expanded state with ExpandedIndices
• Setting individual item expansion with Expanded property
• Controlling default expand behavior

Content Rendering

📄 Read: references/content-rendering.md

• LoadOnDemand property for performance optimization
• Rendering all content at initial load
• On-demand content loading (default behavior)
• Performance considerations for large accordions

Data Binding and Events

📄 Read: references/data-binding-events.md

• Binding local data with foreach loops
• Using HeaderTemplate and ContentTemplate for dynamic content
• Handling Created and Destroyed lifecycle events
• Responding to Clicked events
• Managing Expanding/Expanded and Collapsing/Collapsed events
• Preventing default expand/collapse behavior with event args

Customization and Styling

📄 Read: references/customization-styling.md

• Customizing accordion border and appearance
• Styling accordion items with CSS
• Customizing header content and expand/collapse icons
• Applying hover and selected item styles
• Using CssClass property on individual items
• CSS class structure and available classes
• Theme integration and responsive design

Accessibility and Animations

📄 Read: references/accessibility-animations.md

• WCAG 2.2 and Section 508 compliance
• ARIA attributes and screen reader support
• Keyboard navigation (Arrow keys, Space/Enter, Home/End)
• RTL support and color contrast
• Configuring expand/collapse animations
• Animation effects (SlideDown, SlideUp, FadeIn, FadeOut, ZoomIn, ZoomOut, None)
• Customizing animation duration and easing

How-To Scenarios

📄 Read: references/how-to-scenarios.md

• Adding custom icons to accordion headers
• Creating nested accordions (accordion within accordion)
• Dynamically adding and removing accordion items
• Creating wizard interfaces with sequential validation
• Enabling or disabling specific accordion items
• Integrating other components (TreeView, etc.) inside accordion content
• Preventing expand/collapse for specific conditions
• Showing or hiding accordion items conditionally

Quick Start

Basic Accordion

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="ASP.NET" Content="Microsoft ASP.NET is a set of technologies for building Web applications."></AccordionItem>
        <AccordionItem Header="ASP.NET MVC" Content="The Model-View-Controller pattern separates an application into three components."></AccordionItem>
        <AccordionItem Header="JavaScript" Content="JavaScript is an interpreted programming language for web development."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Accordion with Templates

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem>
            <HeaderTemplate>
                <div>Employee Details</div>
            </HeaderTemplate>
            <ContentTemplate>
                <div>
                    <b>Name:</b> John Doe<br />
                    <b>Position:</b> Software Engineer
                </div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

Data-Bound Accordion

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        @foreach (var item in AccordionData)
        {
            <AccordionItem>
                <HeaderTemplate>
                    <div>@item.Title</div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>@item.Content</div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<DataItem> AccordionData = new List<DataItem>() {
        new DataItem { Title = "Item 1", Content = "Content 1" },
        new DataItem { Title = "Item 2", Content = "Content 2" }
    };
    
    public class DataItem {
        public string Title { get; set; }
        public string Content { get; set; }
    }
}

Common Patterns

Single Expand Mode

Use when only one panel should be open at a time (like FAQs):

<SfAccordion ExpandMode="ExpandMode.Single">
    <AccordionItems>
        <AccordionItem Expanded="true" Header="Question 1" Content="Answer 1"></AccordionItem>
        <AccordionItem Header="Question 2" Content="Answer 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

Handling Expand Events

Use when you need to perform actions during expand/collapse:

<SfAccordion>
    <AccordionEvents Expanding="OnExpanding" Expanded="OnExpanded"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    public void OnExpanding(ExpandEventArgs args) {
        // Perform validation or load data before expansion
    }
    
    public void OnExpanded(ExpandedEventArgs args) {
        // Handle post-expansion actions
    }
}

Dynamic Item Management

Use when items need to be added or removed at runtime:

<SfButton @onclick="AddItem">Add Item</SfButton>

<SfAccordion>
    <AccordionItems>
        @foreach (var item in Items)
        {
            <AccordionItem Header="@item.Header" Content="@item.Content"></AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<ItemData> Items = new List<ItemData>();
    
    void AddItem() {
        Items.Add(new ItemData { Header = "New Item", Content = "New Content" });
    }
}

Nested Accordion

Use when you need hierarchical collapsible sections:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Parent Item">
            <ContentTemplate>
                <SfAccordion>
                    <AccordionItems>
                        <AccordionItem Header="Child Item 1" Content="Child Content 1"></AccordionItem>
                        <AccordionItem Header="Child Item 2" Content="Child Content 2"></AccordionItem>
                    </AccordionItems>
                </SfAccordion>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

Key Properties and Configuration

Core Properties

AccordionItem Properties

Animation Properties

Configure expand/collapse animations using AccordionAnimationSettings:

<SfAccordion>
    <AccordionAnimationSettings>
        <AccordionAnimationExpand Effect="AnimationEffect.SlideDown" Duration="400"></AccordionAnimationExpand>
        <AccordionAnimationCollapse Effect="AnimationEffect.SlideUp" Duration="400"></AccordionAnimationCollapse>
    </AccordionAnimationSettings>
    <AccordionItems>
        <!-- Items here -->
    </AccordionItems>
</SfAccordion>

Available animation effects: SlideDown, SlideUp, FadeIn, FadeOut, FadeZoomIn, FadeZoomOut, ZoomIn, ZoomOut, None

Common Use Cases

FAQ Section

Perfect for FAQs where only one answer should be visible at a time:

• Use ExpandMode.Single
• Set first item as Expanded="true"
• Style headers to look like questions

Multi-Step Form/Wizard

Create guided workflows with sequential steps:

• Use Disabled property to prevent skipping steps
• Use Expanded property to control which step is active
• Handle Expanding event to validate before moving to next step

Navigation Menu

Organize navigation items hierarchically:

• Use nested accordions for sub-menus
• Use IconCss for menu icons
• Handle Clicked event for navigation actions

Content Organization

Organize large amounts of content in compact form:

• Use LoadOnDemand="true" for performance
• Use Multiple expand mode for flexible viewing
• Provide clear, descriptive headers

Data Display

Display structured data in collapsible sections:

• Use data binding with foreach
• Use templates for rich content display
• Handle events for lazy-loading detailed data

Next Steps

• For installation and setup, read references/getting-started.md
• For expand behavior configuration, read references/expand-modes.md
• For event handling and data binding, read references/data-binding-events.md
• For styling and customization, read references/customization-styling.md
• For practical examples, read references/how-to-scenarios.md

Accessibility and Animations in Blazor Accordion Component

Table of Contents

• Accessibility Overview
• Accessibility Compliance
• WAI-ARIA Attributes
• Keyboard Navigation
• Screen Reader Support
• Accessibility Best Practices
• Animation Configuration
• Animation Effects
• Custom Animation Settings

Accessibility Overview

The Blazor Accordion component is designed with accessibility as a core feature, following WAI-ARIA specifications and providing comprehensive keyboard navigation and screen reader support.

Accessibility Compliance

The Accordion component meets the following accessibility standards:

Legend:

• ✓ Yes: All features meet the requirement
• Partial: Some features meet the requirement
• No: The component does not meet the requirement

Standards Covered

WCAG 2.2 (Web Content Accessibility Guidelines):

• Level AA compliance
• Perceivable, operable, understandable, and robust content
• Keyboard accessible
• Sufficient color contrast

Section 508:

• Federal accessibility standards compliance
• Compatible with assistive technologies
• Keyboard-only navigation support

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications):

• Proper ARIA roles and attributes
• State and property management
• Follows accordion design pattern

WAI-ARIA Attributes

The Accordion component implements appropriate ARIA attributes to ensure compatibility with assistive technologies.

Implemented ARIA Attributes

How ARIA Attributes Work

Header with role="button":

<div role="button" aria-expanded="false" aria-controls="content-1">
    Header Text
</div>

Content with role="region":

<div role="region" aria-labelledby="header-1" aria-hidden="true">
    Content Text
</div>

When expanded:

• aria-expanded changes to "true"
• aria-hidden changes to "false"
• Screen readers announce the state change

Keyboard Navigation

The Accordion component supports full keyboard navigation, allowing users to interact without a mouse.

Supported Keyboard Shortcuts

Keyboard Navigation Behavior

Initial Focus:

• Tabbing into the accordion focuses the first header
• If an item is expanded, focus goes to that header

Within Accordion:

• Arrow keys navigate between headers only
• Space/Enter toggles the focused item
• Focus indicators clearly show current position

Leaving Accordion:

• Tab moves to next focusable element outside accordion
• Shift+Tab moves to previous focusable element

Implementation

Keyboard navigation works automatically - no additional configuration required:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
        <AccordionItem Header="Item 3" Content="Content 3"></AccordionItem>
    </AccordionItems>
</SfAccordion>

Screen Reader Support

The Accordion component provides comprehensive screen reader support for visually impaired users.

Screen Reader Announcements

When focusing a header:

• Announces header text
• Announces current state (expanded or collapsed)
• Announces position ("Item 1 of 3")

When expanding:

• Announces "Expanded"
• Reads associated content

When collapsing:

• Announces "Collapsed"

Supported Screen Readers

• JAWS (Job Access With Speech)
• NVDA (NonVisual Desktop Access)
• VoiceOver (macOS/iOS)
• TalkBack (Android)
• Narrator (Windows)

Testing with Screen Readers

The accordion component has been tested with major screen readers and meets accessibility requirements. You can test your implementation using Axe-core:

# Install Axe-core for testing
dotnet add package Deque.AxeCore.Playwright

Accessibility Best Practices

Meaningful Header Text

Provide descriptive headers that clearly indicate content:

<!-- ✓ Good: Clear and descriptive -->
<AccordionItem Header="Shipping and Delivery Information" Content="..."></AccordionItem>

<!-- ✗ Bad: Vague -->
<AccordionItem Header="More Info" Content="..."></AccordionItem>

Logical Order

Arrange items in a logical sequence that makes sense when navigated with keyboard:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Step 1: Registration" Content="..."></AccordionItem>
        <AccordionItem Header="Step 2: Verification" Content="..."></AccordionItem>
        <AccordionItem Header="Step 3: Completion" Content="..."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Color Contrast

Ensure sufficient contrast between text and background:

/* Minimum contrast ratios (WCAG AA): */
/* Normal text: 4.5:1 */
/* Large text (18pt+): 3:1 */

.e-accordion .e-acrdn-header {
    color: #000000; /* Black text */
    background: #FFFFFF; /* White background */
    /* Contrast ratio: 21:1 ✓ */
}

Focus Indicators

Maintain visible focus indicators (default provided):

/* Customize if needed, but keep visible */
.e-accordion .e-acrdn-header:focus {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
}

Right-to-Left (RTL) Support

The component automatically supports RTL languages:

<div dir="rtl">
    <SfAccordion>
        <AccordionItems>
            <AccordionItem Header="العنوان" Content="المحتوى"></AccordionItem>
        </AccordionItems>
    </SfAccordion>
</div>

Animation Configuration

The Accordion component supports customizable animations for expand and collapse actions.

Default Animations

By default, the accordion uses:

• Expand: SlideDown effect
• Collapse: SlideUp effect

AccordionAnimationSettings

Configure animations using the AccordionAnimationSettings component:

<SfAccordion>
    <AccordionAnimationSettings>
        <AccordionAnimationExpand Effect="AnimationEffect.SlideDown" Duration="400" Easing="ease"></AccordionAnimationExpand>
        <AccordionAnimationCollapse Effect="AnimationEffect.SlideUp" Duration="400" Easing="ease"></AccordionAnimationCollapse>
    </AccordionAnimationSettings>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

Animation Properties

Animation Effects

The following animation effects are available:

Available Effects

Examples

Fade Animation

<SfAccordion>
    <AccordionAnimationSettings>
        <AccordionAnimationExpand Effect="AnimationEffect.FadeIn" Duration="300"></AccordionAnimationExpand>
        <AccordionAnimationCollapse Effect="AnimationEffect.FadeOut" Duration="300"></AccordionAnimationCollapse>
    </AccordionAnimationSettings>
    <AccordionItems>
        <AccordionItem Header="Fade Effect" Content="This uses fade animation"></AccordionItem>
    </AccordionItems>
</SfAccordion>

Zoom Animation

<SfAccordion>
    <AccordionAnimationSettings>
        <AccordionAnimationExpand Effect="AnimationEffect.ZoomIn" Duration="400"></AccordionAnimationExpand>
        <AccordionAnimationCollapse Effect="AnimationEffect.ZoomOut" Duration="400"></AccordionAnimationCollapse>
    </AccordionAnimationSettings>
    <AccordionItems>
        <AccordionItem Header="Zoom Effect" Content="This uses zoom animation"></AccordionItem>
    </AccordionItems>
</SfAccordion>

No Animation (Accessibility Mode)

<SfAccordion>
    <AccordionAnimationSettings>
        <AccordionAnimationExpand Effect="AnimationEffect.None"></AccordionAnimationExpand>
        <AccordionAnimationCollapse Effect="AnimationEffect.None"></AccordionAnimationCollapse>
    </AccordionAnimationSettings>
    <AccordionItems>
        <AccordionItem Header="No Animation" Content="Instant toggle"></AccordionItem>
    </AccordionItems>
</SfAccordion>

When to disable animations:

• User prefers reduced motion (prefers-reduced-motion CSS media query)
• Performance issues on low-end devices
• Accessibility requirements
• Testing scenarios

Custom Animation Settings

Adjusting Duration

Control animation speed (in milliseconds):

<AccordionAnimationSettings>
    <!-- Fast animation (200ms) -->
    <AccordionAnimationExpand Effect="AnimationEffect.SlideDown" Duration="200"></AccordionAnimationExpand>
    
    <!-- Slow animation (800ms) -->
    <AccordionAnimationCollapse Effect="AnimationEffect.SlideUp" Duration="800"></AccordionAnimationCollapse>
</AccordionAnimationSettings>

Guidelines:

• 200-300ms: Fast, snappy feel
• 400-500ms: Balanced (recommended)
• 600-800ms: Slow, emphasize motion
• >800ms: Potentially frustrating

Customizing Easing

Control acceleration curve:

<AccordionAnimationSettings>
    <AccordionAnimationExpand Easing="ease-in"></AccordionAnimationExpand>
    <AccordionAnimationCollapse Easing="ease-out"></AccordionAnimationCollapse>
</AccordionAnimationSettings>

Common easing functions:

• ease: Slow start and end (default)
• linear: Constant speed
• ease-in: Slow start, fast end
• ease-out: Fast start, slow end
• ease-in-out: Slow start and end (more pronounced)

Respecting User Preferences

Detect and respect user's motion preferences:

<SfAccordion>
    <AccordionAnimationSettings>
        <AccordionAnimationExpand Effect="@ExpandEffect"></AccordionAnimationExpand>
        <AccordionAnimationCollapse Effect="@CollapseEffect"></AccordionAnimationCollapse>
    </AccordionAnimationSettings>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    AnimationEffect ExpandEffect = AnimationEffect.SlideDown;
    AnimationEffect CollapseEffect = AnimationEffect.SlideUp;
    
    protected override async Task OnInitializedAsync() {
        // Check user preference (would need JS interop in real implementation)
        bool prefersReducedMotion = await CheckReducedMotionPreference();
        
        if (prefersReducedMotion) {
            ExpandEffect = AnimationEffect.None;
            CollapseEffect = AnimationEffect.None;
        }
    }
    
    async Task<bool> CheckReducedMotionPreference() {
        // Implementation would use JS interop to check:
        // window.matchMedia('(prefers-reduced-motion: reduce)').matches
        return false;
    }
}

CSS-Based Reduced Motion

Alternative approach using CSS:

@media (prefers-reduced-motion: reduce) {
    .e-accordion .e-acrdn-panel {
        transition: none !important;
        animation: none !important;
    }
}

Combining Accessibility and Animations

Balance aesthetics with accessibility:

<SfAccordion>
    <AccordionAnimationSettings>
        <!-- Moderate duration for good UX -->
        <AccordionAnimationExpand Effect="AnimationEffect.SlideDown" Duration="350"></AccordionAnimationExpand>
        <AccordionAnimationCollapse Effect="AnimationEffect.SlideUp" Duration="350"></AccordionAnimationCollapse>
    </AccordionAnimationSettings>
    <AccordionItems>
        <!-- Clear, descriptive headers for screen readers -->
        <AccordionItem Header="Shipping Information" Content="Detailed shipping info..."></AccordionItem>
        <AccordionItem Header="Return Policy" Content="Return policy details..."></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    /* Ensure good contrast */
    .e-accordion .e-acrdn-header {
        color: #000000;
        background: #FFFFFF;
    }
    
    /* Visible focus indicator */
    .e-accordion .e-acrdn-header:focus {
        outline: 2px solid #2196F3;
        outline-offset: 2px;
    }
    
    /* Respect user motion preferences */
    @media (prefers-reduced-motion: reduce) {
        .e-accordion * {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
</style>

Testing Accessibility

Manual Testing

1. Keyboard Navigation: Tab through all interactive elements 2. Screen Reader: Test with NVDA, JAWS, or VoiceOver 3. Color Contrast: Use browser dev tools or online checkers 4. Focus Indicators: Ensure focus is always visible 5. RTL Languages: Test with dir="rtl"

Automated Testing

Use axe-core for automated accessibility validation. The component passes axe-core tests.

Related Topics

• Getting Started - Basic setup
• Expand Modes - Single vs multiple expand behavior
• Customization and Styling - CSS customization with accessibility considerations
• How-To Scenarios - Practical implementation examples

Content Rendering in Blazor Accordion Component

This guide explains how the Accordion component renders content and how to optimize performance using the LoadOnDemand property.

Table of Contents

• Overview
• LoadOnDemand Property
• On-Demand Loading (Default Behavior)
• Pre-Rendering All Content
• Performance Comparison
• Best Practices
• Advanced Scenarios
• Impact on Initial Expansion
• Troubleshooting
• Related Topics

Overview

The Accordion component provides two content rendering strategies:

1. On-Demand Loading (Default): Content is rendered only when an item is expanded 2. Pre-Rendering: All content is rendered at initial load and maintained in the DOM

The rendering strategy is controlled by the LoadOnDemand property.

LoadOnDemand Property

The LoadOnDemand property determines when accordion item content is rendered.

• `true` (Default): Content is loaded only when the item is expanded for the first time
• `false`: All content is rendered immediately when the accordion loads

On-Demand Loading (Default Behavior)

How It Works

With LoadOnDemand="true" (the default):

1. Initially, only accordion headers are rendered 2. When a user expands an item for the first time, its content is rendered 3. Once rendered, the content remains in the DOM (cached) 4. Subsequent expand/collapse actions don't re-render the content

When to Use On-Demand Loading

Use LoadOnDemand="true" when:

• Accordion has many items (5+ items)
• Content is complex (images, charts, nested components)
• Initial page load time is critical
• Not all users will expand every item
• Memory efficiency is important

Implementation

@using Syncfusion.Blazor.Navigations

<SfAccordion LoadOnDemand="true">
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="This content loads only when Item 1 is expanded."></AccordionItem>
        <AccordionItem Header="Item 2" Content="This content loads only when Item 2 is expanded."></AccordionItem>
        <AccordionItem Header="Item 3" Content="This content loads only when Item 3 is expanded."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Note: Since LoadOnDemand="true" is the default, you can omit this property:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

Performance Benefits

Initial Load:

• Faster page load time
• Reduced initial HTML size
• Lower memory consumption
• Improved perceived performance

Runtime:

• Content is rendered only once (cached after first expansion)
• No re-rendering on subsequent expand/collapse
• Smooth expand/collapse animations

Pre-Rendering All Content

How It Works

With LoadOnDemand="false":

1. All accordion item content is rendered immediately on page load 2. Content exists in the DOM whether items are expanded or collapsed 3. Expanding/collapsing items only shows/hides existing content 4. No additional rendering occurs during user interaction

When to Use Pre-Rendering

Use LoadOnDemand="false" when:

• Small number of items (2-3 items)
• Content is simple (text-only, minimal HTML)
• All content will likely be viewed
• SEO is important (content indexing)
• Need to access all content via JavaScript immediately
• Client-side search needs access to all content

Implementation

@using Syncfusion.Blazor.Navigations

<SfAccordion LoadOnDemand="false">
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="All content is pre-rendered."></AccordionItem>
        <AccordionItem Header="Item 2" Content="This content is in the DOM even when collapsed."></AccordionItem>
        <AccordionItem Header="Item 3" Content="Expand/collapse only toggles visibility."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Trade-offs

Advantages:

• Instant expand/collapse (no rendering delay)
• Content available for search/indexing
• Simpler for screen readers
• Predictable memory usage

Disadvantages:

• Slower initial page load
• Higher initial memory consumption
• All content loads even if never viewed
• Not ideal for large accordions

Performance Comparison

Scenario: 10 Items with Complex Content

Scenario: 3 Items with Simple Text

Best Practices

Default Recommendation

For most use cases, keep the default LoadOnDemand="true":

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Header 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Header 2" Content="Content 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

When to Override

Only set LoadOnDemand="false" if you have a specific need:

<!-- SEO-critical content that must be indexed -->
<SfAccordion LoadOnDemand="false">
    <AccordionItems>
        <AccordionItem Header="Product Description" Content="Important product details for search engines."></AccordionItem>
        <AccordionItem Header="Specifications" Content="Technical specs that need to be indexed."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Combining with ExpandMode

The LoadOnDemand property works with both expand modes:

Single Mode + On-Demand

<SfAccordion ExpandMode="ExpandMode.Single" LoadOnDemand="true">
    <AccordionItems>
        <AccordionItem Expanded="true" Header="FAQ 1" Content="Answer 1 is pre-loaded because it's initially expanded."></AccordionItem>
        <AccordionItem Header="FAQ 2" Content="Answer 2 loads when first expanded."></AccordionItem>
        <AccordionItem Header="FAQ 3" Content="Answer 3 loads when first expanded."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Behavior: Initially expanded item's content is rendered immediately. Other items load on first expansion.

Multiple Mode + On-Demand

<SfAccordion ExpandMode="ExpandMode.Multiple" LoadOnDemand="true" @bind-ExpandedIndices="@(new int[]{0, 2})">
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Pre-loaded (initially expanded)."></AccordionItem>
        <AccordionItem Header="Item 2" Content="Loads on first expand."></AccordionItem>
        <AccordionItem Header="Item 3" Content="Pre-loaded (initially expanded)."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Behavior: Initially expanded items (0 and 2) are pre-rendered. Item 1 loads when first expanded.

Advanced Scenarios

Heavy Content with LoadOnDemand

For accordion items with complex content (charts, grids, large images):

<SfAccordion LoadOnDemand="true">
    <AccordionItems>
        <AccordionItem Header="Sales Dashboard">
            <ContentTemplate>
                <!-- Complex chart component only renders when expanded -->
                <SfChart>
                    <!-- Chart configuration -->
                </SfChart>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem Header="Data Grid">
            <ContentTemplate>
                <!-- Large data grid only renders when expanded -->
                <SfGrid DataSource="@LargeDataSet">
                    <!-- Grid configuration -->
                </SfGrid>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

Benefit: Heavy components only initialize when users actually need them.

Lazy Data Loading

Combine LoadOnDemand with async data fetching:

<SfAccordion LoadOnDemand="true">
    <AccordionEvents Expanding="OnExpanding"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="User Data">
            <ContentTemplate>
                @if (UserData != null) {
                    <div>@UserData</div>
                } else {
                    <div>Loading...</div>
                }
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    string UserData = null;
    
    async void OnExpanding(ExpandEventArgs args) {
        if (args.Index == 0 && UserData == null) {
            UserData = await FetchUserDataAsync();
            StateHasChanged();
        }
    }
    
    async Task<string> FetchUserDataAsync() {
        await Task.Delay(1000); // Simulate API call
        return "User data loaded from API";
    }
}

Pattern: Content shell renders on expand, then data is fetched and displayed.

Impact on Initial Expansion

With Expanded Property

Items marked as Expanded="true" are rendered immediately regardless of LoadOnDemand setting:

<SfAccordion LoadOnDemand="true">
    <AccordionItems>
        <AccordionItem Expanded="true" Header="Item 1" Content="This IS rendered on page load."></AccordionItem>
        <AccordionItem Header="Item 2" Content="This is NOT rendered until expanded."></AccordionItem>
    </AccordionItems>
</SfAccordion>

With ExpandedIndices

Items in the ExpandedIndices array are rendered immediately:

<SfAccordion LoadOnDemand="true" @bind-ExpandedIndices="@(new int[]{0, 2})">
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Rendered on page load."></AccordionItem>
        <AccordionItem Header="Item 2" Content="NOT rendered until expanded."></AccordionItem>
        <AccordionItem Header="Item 3" Content="Rendered on page load."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Troubleshooting

Content Not Loading

Issue: Content doesn't appear when item is expanded

Solutions:

• Verify LoadOnDemand is set correctly
• Check browser console for errors
• Ensure ContentTemplate has valid markup
• Verify data is available when content renders

Slow Initial Load

Issue: Page takes too long to load with accordion

Solutions:

• Ensure LoadOnDemand="true" (default)
• Reduce number of initially expanded items
• Optimize content within items
• Consider lazy loading for heavy components

SEO Issues

Issue: Search engines not indexing accordion content

Solutions:

• Set LoadOnDemand="false" for SEO-critical content
• Use meaningful header text (always visible)
• Consider server-side rendering for important content
• Test with Google Search Console

Related Topics

• Getting Started - Basic accordion setup
• Expand Modes - Controlling expansion behavior
• Data Binding and Events - Dynamic content and event handling
• How-To Scenarios - Practical implementation examples

Customization and Styling in Blazor Accordion Component

Table of Contents

• Overview
• Customizing Accordion Border
• Customizing Accordion Items
• Customizing Header Content
• Customizing Expand/Collapse Icons
• Customizing Hover State
• Customizing Selected Items
• Using CssClass Property
• CSS Class Reference
• Theme Integration

Overview

The Accordion component provides extensive customization options through CSS. You can modify the appearance of the accordion container, individual items, headers, icons, and interaction states to match your application's design requirements.

Customizing Accordion Border

Apply custom border styles to the entire accordion component:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion {
        border: 5px solid #4CAF50;
    }
</style>

Customization options:

• Border width, style, and color
• Border radius for rounded corners
• Box shadow for depth effect
• Background color

Customizing Accordion Items

Style individual accordion items:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion .e-acrdn-item.e-select {
        text-align: center;
        background-color: #E3F2FD;
    }
</style>

Customization options:

• Background color
• Text alignment
• Padding and margins
• Border styles

Customizing Header Content

Apply custom styles to accordion header text:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Custom Header" Content="Content here"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
        color: #1976D2;
        font-style: italic;
        font-weight: bold;
        font-size: 16px;
    }
</style>

Customization options:

• Font color, size, and weight
• Font family and style
• Text transformation
• Letter spacing

Customizing Expand/Collapse Icons

Customize the toggle icons that indicate expand/collapse state:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon .e-icons {
        color: #FF5722;
        font-size: 18px;
    }
</style>

Customization options:

• Icon color
• Icon size
• Icon position
• Custom icon fonts

Customizing Hover State

Apply styles when users hover over accordion headers:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Hover over me" Content="Content here"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion .e-acrdn-item .e-acrdn-header:hover {
        border: 2px solid #2196F3;
        background-color: #E3F2FD;
    }
</style>

Customization options:

• Background color change
• Border highlight
• Text color change
• Cursor style

Customizing Selected Items

Style accordion items when they are expanded:

Selected Item Header

<SfAccordion>
    <AccordionItems>
        <AccordionItem Expanded="true" Header="Selected Item" Content="Content here"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header,
    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header,
    .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header,
    .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:focus {
        background-color: #1565C0;
    }
</style>

Selected Item Text

<style>
    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content,
    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content,
    .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-acrdn-header-content {
        color: #FFFFFF;
        font-weight: bold;
    }
</style>

Using CssClass Property

Apply custom CSS classes to individual accordion items using the CssClass property:

<SfAccordion>
    <AccordionItems>
        <AccordionItem CssClass="primary-item" Header="Primary Item" Content="Primary content"></AccordionItem>
        <AccordionItem CssClass="secondary-item" Header="Secondary Item" Content="Secondary content"></AccordionItem>
        <AccordionItem CssClass="success-item" Header="Success Item" Content="Success content"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon .e-icons {
        color: #000000;
    }
    
    .e-accordion .primary-item.e-acrdn-item.e-select > .e-acrdn-header {
        background: #2196F3;
        color: #FFFFFF;
    }
    
    .e-accordion .secondary-item.e-acrdn-item.e-select > .e-acrdn-header {
        background: #9C27B0;
        color: #FFFFFF;
    }
    
    .e-accordion .success-item.e-acrdn-item.e-select > .e-acrdn-header {
        background: #4CAF50;
        color: #FFFFFF;
    }
</style>

Benefits:

• Target specific items without affecting others
• Create themed accordion items
• Apply different styles based on item type
• Maintain clean, maintainable CSS

CSS Class Reference

Root and Item Classes

Header Classes

Toggle Icon Classes

Panel and Content Classes

State Classes

Nested and RTL Classes

Theme Integration

Using Built-in Themes

The Accordion component supports multiple built-in themes:

<!-- Fluent 2 Theme -->
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />

<!-- Material Theme -->
<link href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />

<!-- Bootstrap 5 Theme -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

Creating Custom Themes

Override theme variables for consistent customization across themes:

:root {
    --accordion-bg-color: #FFFFFF;
    --accordion-header-color: #333333;
    --accordion-hover-bg: #F5F5F5;
    --accordion-selected-bg: #2196F3;
    --accordion-selected-color: #FFFFFF;
}

.e-accordion {
    background-color: var(--accordion-bg-color);
}

.e-accordion .e-acrdn-header {
    color: var(--accordion-header-color);
}

.e-accordion .e-acrdn-header:hover {
    background-color: var(--accordion-hover-bg);
}

.e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
    background-color: var(--accordion-selected-bg);
    color: var(--accordion-selected-color);
}

Responsive Styling

Adapt accordion styles for different screen sizes:

/* Desktop */
.e-accordion .e-acrdn-header {
    padding: 15px 20px;
    font-size: 16px;
}

/* Tablet */
@media (max-width: 768px) {
    .e-accordion .e-acrdn-header {
        padding: 12px 15px;
        font-size: 14px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .e-accordion .e-acrdn-header {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .e-accordion {
        border-width: 1px;
    }
}

Advanced Customization Examples

Card-Style Accordion

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Card Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Card Item 2" Content="Content 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion {
        border: none;
        background: transparent;
    }
    
    .e-accordion .e-acrdn-item {
        margin-bottom: 10px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: 1px solid #E0E0E0;
    }
    
    .e-accordion .e-acrdn-item .e-acrdn-header {
        border-radius: 8px 8px 0 0;
        background: #F5F5F5;
    }
    
    .e-accordion .e-acrdn-item.e-selected .e-acrdn-header {
        background: #2196F3;
        color: #FFFFFF;
    }
</style>

Gradient Background Accordion

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Gradient Item" Content="Content here"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #FFFFFF;
    }
    
    .e-accordion .e-acrdn-item.e-selected .e-toggle-icon .e-icons {
        color: #FFFFFF;
    }
</style>

Minimal/Flat Design

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Minimal Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Minimal Item 2" Content="Content 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion {
        border: none;
    }
    
    .e-accordion .e-acrdn-item {
        border: none;
        border-bottom: 1px solid #E0E0E0;
    }
    
    .e-accordion .e-acrdn-header {
        background: transparent;
        padding: 15px 10px;
    }
    
    .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
        background: transparent;
        color: #2196F3;
        border-left: 3px solid #2196F3;
        padding-left: 12px;
    }
</style>

Custom Icon Styling

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Item with Custom Icon" Content="Content here"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    .e-accordion .e-toggle-icon {
        width: 30px;
        height: 30px;
        background: #2196F3;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .e-accordion .e-toggle-icon .e-icons {
        color: #FFFFFF;
    }
</style>

Best Practices

Styling Guidelines

1. Use specific selectors to avoid affecting other components 2. Test with different themes to ensure compatibility 3. Maintain consistent spacing across items 4. Consider accessibility when changing colors (contrast ratios) 5. Use CSS variables for easy theme switching

Performance Tips

1. Minimize CSS complexity - avoid deeply nested selectors 2. Use CSS classes instead of inline styles 3. Avoid !important - use proper specificity instead 4. Group similar styles for better maintainability 5. Test on mobile devices for responsive behavior

Common Pitfalls

Avoid:

• Overriding component structure with display/position changes
• Breaking animation behavior with transform overrides
• Conflicting with theme updates
• Using inline styles that can't be easily changed
• Forgetting to test hover/focus/active states

Troubleshooting

Styles not applying:

• Check CSS specificity (use browser dev tools)
• Ensure styles are loaded after theme CSS
• Verify class names are correct
• Check for typos in selectors

Hover effects not working:

• Ensure .e-select class is present in selector
• Check for z-index issues
• Verify hover is not disabled via CSS

Custom colors affecting readability:

• Test color contrast ratios (WCAG AA: 4.5:1 minimum)
• Provide sufficient contrast for text
• Test with color blindness simulators

Related Topics

• Getting Started - Adding theme stylesheets
• Accessibility and Animations - Color contrast requirements
• How-To Scenarios - Practical styling examples

Data Binding and Events in Blazor Accordion Component

Table of Contents

• Data Binding
• Template-Based Binding
• Dynamic Item Management
• Accordion Events
• Event Examples
• Best Practices

Data Binding

The Accordion component supports local data binding using a foreach loop to iterate through a data collection and generate accordion items dynamically.

Basic Data Binding

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        @foreach (var item in AccordionData)
        {
            <AccordionItem>
                <HeaderTemplate>
                    <div>@item.EmployeeName</div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>
                        <div><b>Employee ID:</b> @item.EmployeeId</div>
                        <div><b>Designation:</b> @item.Designation</div>
                    </div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<AccordionData> AccordionData = new List<AccordionData>() {
        new AccordionData { EmployeeId = 1, EmployeeName = "Laura Callahan", Designation = "Product Manager" },
        new AccordionData { EmployeeId = 3, EmployeeName = "Andrew Fuller", Designation = "Team Lead" },
        new AccordionData { EmployeeId = 4, EmployeeName = "Anne Dodsworth", Designation = "Developer" },
        new AccordionData { EmployeeId = 5, EmployeeName = "Nancy Davolio", Designation = "Product Manager" }
    };

    public class AccordionData {
        public string EmployeeName { get; set; }
        public int EmployeeId { get; set; }
        public string Designation { get; set; }
    }
}

Key Points:

• Use foreach loop inside <AccordionItems> to generate items from data
• Each iteration creates an <AccordionItem> element
• HeaderTemplate and ContentTemplate render data properties
• Data source can be List, Array, or any IEnumerable

When to Use Data Binding

Use data binding when:

• Content comes from a database or API
• Number of items varies dynamically
• Items share the same structure/template
• Need to add/remove items programmatically
• Implementing search or filter functionality

Template-Based Binding

Templates provide full control over content rendering with access to data context.

HeaderTemplate

Customize the header appearance with HTML and data:

<AccordionItem>
    <HeaderTemplate>
        <div style="display: flex; justify-content: space-between; width: 100%;">
            <span><strong>@item.Title</strong></span>
            <span class="badge">@item.Count</span>
        </div>
    </HeaderTemplate>
    <ContentTemplate>
        <div>@item.Description</div>
    </ContentTemplate>
</AccordionItem>

ContentTemplate

Render complex content structures:

<AccordionItem>
    <HeaderTemplate>
        <div>@employee.Name</div>
    </HeaderTemplate>
    <ContentTemplate>
        <div class="employee-card">
            <img src="@employee.PhotoUrl" alt="@employee.Name" />
            <div class="employee-details">
                <p><b>ID:</b> @employee.Id</p>
                <p><b>Department:</b> @employee.Department</p>
                <p><b>Email:</b> @employee.Email</p>
            </div>
        </div>
    </ContentTemplate>
</AccordionItem>

Conditional Rendering in Templates

Apply conditional logic within templates:

<AccordionItem>
    <HeaderTemplate>
        <div>
            @item.Title
            @if (item.IsNew) {
                <span class="badge-new">New</span>
            }
        </div>
    </HeaderTemplate>
    <ContentTemplate>
        <div>
            @if (item.HasContent) {
                <p>@item.Content</p>
            } else {
                <p>No content available.</p>
            }
        </div>
    </ContentTemplate>
</AccordionItem>

Dynamic Item Management

Add, remove, or modify accordion items at runtime by manipulating the data source.

Adding Items Dynamically

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="AddItem">Add Item</SfButton>

<SfAccordion>
    <AccordionItems>
        @foreach (var item in Items)
        {
            <AccordionItem @bind-Expanded="item.IsExpanded">
                <HeaderTemplate>
                    <div>@item.Header</div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>@item.Content</div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<AccordionItem Data> Items = new List<AccordionItemData>() {
        new AccordionItemData { Header = "Item 1", Content = "Content 1", IsExpanded = true },
        new AccordionItemData { Header = "Item 2", Content = "Content 2", IsExpanded = false }
    };

    void AddItem() {
        Items.Add(new AccordionItemData {
            Header = $"Item {Items.Count + 1}",
            Content = $"Content for item {Items.Count + 1}",
            IsExpanded = false
        });
    }

    public class AccordionItemData {
        public string Header { get; set; }
        public string Content { get; set; }
        public bool IsExpanded { get; set; }
    }
}

Removing Items Dynamically

<SfButton @onclick="RemoveItem">Remove First Item</SfButton>

<SfAccordion>
    <AccordionItems>
        @foreach (var item in Items)
        {
            <AccordionItem>
                <HeaderTemplate>
                    <div>@item.Header</div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>@item.Content</div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<AccordionItemData> Items = new List<AccordionItemData>() {
        new AccordionItemData { Header = "Item 1", Content = "Content 1" },
        new AccordionItemData { Header = "Item 2", Content = "Content 2" },
        new AccordionItemData { Header = "Item 3", Content = "Content 3" }
    };

    void RemoveItem() {
        if (Items.Count > 0) {
            Items.RemoveAt(0);
        }
    }
}

Updating Items

Modify item properties to update accordion content:

<SfButton @onclick="UpdateItem">Update First Item</SfButton>

<SfAccordion>
    <AccordionItems>
        @foreach (var item in Items)
        {
            <AccordionItem>
                <HeaderTemplate>
                    <div>@item.Header</div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>@item.Content</div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<AccordionItemData> Items = new List<AccordionItemData>();

    void UpdateItem() {
        if (Items.Count > 0) {
            Items[0].Header = "Updated Header";
            Items[0].Content = "Updated Content";
            StateHasChanged(); // Trigger UI refresh
        }
    }
}

Accordion Events

The Accordion component provides events for various user interactions and lifecycle stages. All events are configured within a single <AccordionEvents> component.

Available Events

Event Configuration

All events must be configured within a single AccordionEvents component:

<SfAccordion>
    <AccordionEvents 
        Created="OnCreated"
        Expanding="OnExpanding"
        Expanded="OnExpanded"
        Collapsing="OnCollapsing"
        Collapsed="OnCollapsed"
        Clicked="OnClicked"
        Destroyed="OnDestroyed">
    </AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

Important: Configure all events within a single <AccordionEvents> component, not multiple instances.

Event Examples

Created Event

Triggered once when the accordion is fully rendered:

<SfAccordion>
    <AccordionEvents Created="OnCreated"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    void OnCreated(object args) {
        // Perform initialization after accordion is created
        Console.WriteLine("Accordion created successfully");
    }
}

Use cases:

• Initialize external libraries
• Log component creation
• Perform post-render setup

Destroyed Event

Triggered when the accordion component is removed:

<SfAccordion>
    <AccordionEvents Destroyed="OnDestroyed"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    void OnDestroyed(object args) {
        // Cleanup operations
        Console.WriteLine("Accordion destroyed");
    }
}

Use cases:

• Cleanup external resources
• Unsubscribe from events
• Log component disposal

Clicked Event

Triggered when clicking anywhere within the accordion:

<SfAccordion>
    <AccordionEvents Clicked="OnClicked"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    void OnClicked(AccordionClickArgs args) {
        Console.WriteLine($"Clicked on accordion");
    }
}

Use cases:

• Track user interactions
• Implement custom analytics
• Handle global accordion click events

Expanding Event

Triggered before an item expands (can be cancelled):

<SfAccordion>
    <AccordionEvents Expanding="OnExpanding"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    void OnExpanding(ExpandEventArgs args) {
        // Perform validation before expansion
        Console.WriteLine($"Item {args.Index} is about to expand");
        
        // Optionally prevent expansion
        // args.Cancel = true;
    }
}

Use cases:

• Validate before expansion
• Load data before showing content
• Prevent expansion under certain conditions
• Show loading indicators

Expanded Event

Triggered after an item has fully expanded:

<SfAccordion>
    <AccordionEvents Expanded="OnExpanded"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    void OnExpanded(ExpandedEventArgs args) {
        Console.WriteLine($"Item {args.Index} is now expanded");
        // Perform post-expansion actions
    }
}

Use cases:

• Track which items are viewed
• Load additional data after expansion
• Update UI state
• Trigger animations

Collapsing Event

Triggered before an item collapses (can be cancelled):

<SfAccordion>
    <AccordionEvents Collapsing="OnCollapsing"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    void OnCollapsing(CollapseEventArgs args) {
        Console.WriteLine($"Item {args.Index} is about to collapse");
        
        // Optionally prevent collapse
        // args.Cancel = true;
    }
}

Use cases:

• Validate before collapse
• Warn users about unsaved changes
• Prevent collapse in certain states

Collapsed Event

Triggered after an item has fully collapsed:

<SfAccordion>
    <AccordionEvents Collapsed="OnCollapsed"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    void OnCollapsed(CollapsedEventArgs args) {
        Console.WriteLine($"Item {args.Index} is now collapsed");
    }
}

Use cases:

• Track user behavior
• Update application state
• Clean up temporary data

Preventing Expansion/Collapse

Use the Cancel property in event args to prevent the action:

<SfAccordion>
    <AccordionEvents Expanding="OnExpanding" Collapsing="OnCollapsing"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1 (Can't expand)" Content="Content 1"></AccordionItem>
        <AccordionItem Expanded="true" Header="Item 2 (Can't collapse)" Content="Content 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    void OnExpanding(ExpandEventArgs args) {
        if (args.Index == 0) {
            args.Cancel = true; // Prevent Item 1 from expanding
        }
    }
    
    void OnCollapsing(CollapseEventArgs args) {
        if (args.Index == 1) {
            args.Cancel = true; // Prevent Item 2 from collapsing
        }
    }
}

Best Practices

Data Binding

1. Use strongly-typed models for data consistency 2. Keep data models simple to avoid unnecessary complexity 3. Initialize data in OnInitialized lifecycle method 4. Use async/await for data fetching 5. Call StateHasChanged() after manual data updates

Event Handling

1. Don't perform heavy operations in Expanding/Collapsing events 2. Use async handlers for I/O operations 3. Avoid infinite loops when modifying state in events 4. Use Expanding event for validation and data loading 5. Use Expanded event for post-action tasks

Performance

1. Use LoadOnDemand="true" with data binding 2. Implement virtualization for large datasets 3. Avoid re-rendering entire lists unnecessarily 4. Cache fetched data to prevent redundant API calls 5. Debounce user actions if updating frequently

Error Handling

<AccordionEvents Expanding="OnExpanding"></AccordionEvents>

@code {
    async void OnExpanding(ExpandEventArgs args) {
        try {
            var data = await FetchDataAsync(args.Index);
            // Process data
        } catch (Exception ex) {
            Console.WriteLine($"Error: {ex.Message}");
            args.Cancel = true; // Prevent expansion on error
        }
    }
}

Related Topics

• Getting Started - Initial setup and basic implementation
• Expand Modes - Controlling expansion behavior
• Content Rendering - LoadOnDemand and performance
• How-To Scenarios - Practical examples including dynamic items and event handling

Expand Modes in Blazor Accordion Component

Table of Contents

• Overview
• Single Expand Mode
• Multiple Expand Mode
• Configuring Initial Expansion
• Controlling Expansion Programmatically
• Best Practices

Overview

The Blazor Accordion component supports two expand modes that control how many panels can be open simultaneously:

• Single Mode: Only one panel can be expanded at a time
• Multiple Mode: Multiple panels can be expanded simultaneously (default)

The expand mode is controlled by the ExpandMode property on the SfAccordion component.

Single Expand Mode

In Single mode, expanding a new panel automatically collapses the previously expanded panel. This ensures only one panel is visible at any time.

When to Use Single Mode

• FAQ Sections: Users typically read one answer at a time
• Wizard Interfaces: Sequential steps where only the current step should be visible
• Form Sections: Breaking forms into sections where focus should be on one section
• Mobile Views: Limited screen space requires focused content display

Implementation

@using Syncfusion.Blazor.Navigations

<SfAccordion ExpandMode="ExpandMode.Single">
    <AccordionItems>
        <AccordionItem Expanded="true" Header="ASP.NET" Content="Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services."></AccordionItem>
        <AccordionItem Header="ASP.NET MVC" Content="The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller."></AccordionItem>
        <AccordionItem Header="JavaScript" Content="JavaScript (JS) is an interpreted computer programming language originally implemented as part of web browsers."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Key Points:

• Set ExpandMode="ExpandMode.Single"
• Optionally set Expanded="true" on one item to have it open initially
• Clicking any collapsed item will collapse the currently expanded item

Behavior

1. User clicks on Item 2 → Item 1 collapses, Item 2 expands 2. User clicks on Item 3 → Item 2 collapses, Item 3 expands 3. User clicks on the expanded item → Item collapses (all items collapsed)

Multiple Expand Mode

Multiple mode is the default behavior. It allows users to expand as many panels as needed, providing maximum flexibility.

When to Use Multiple Mode

• Documentation/Help Pages: Users may want to reference multiple sections
• Settings Panels: Users may need to view multiple configuration sections
• Content Comparison: Comparing information across different panels
• General Navigation: When there's no specific workflow or sequence

Implementation

@using Syncfusion.Blazor.Navigations

<SfAccordion ExpandMode="ExpandMode.Multiple">
    <AccordionItems>
        <AccordionItem Header="ASP.NET" Content="Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services."></AccordionItem>
        <AccordionItem Header="ASP.NET MVC" Content="The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller."></AccordionItem>
        <AccordionItem Header="JavaScript" Content="JavaScript (JS) is an interpreted computer programming language originally implemented as part of web browsers."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Key Points:

• ExpandMode="ExpandMode.Multiple" is the default (can be omitted)
• Multiple items can be expanded simultaneously
• Each item can be expanded/collapsed independently
• Clicking an expanded item toggles it closed

Behavior

• All items can be expanded at the same time
• Expanding one item does not affect others
• Each item acts as an independent toggle

Configuring Initial Expansion

Control which panels are expanded when the accordion first renders.

Using the Expanded Property

Set Expanded="true" on individual AccordionItem elements:

<SfAccordion ExpandMode="ExpandMode.Multiple">
    <AccordionItems>
        <AccordionItem Expanded="true" Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
        <AccordionItem Expanded="true" Header="Item 3" Content="Content 3"></AccordionItem>
    </AccordionItems>
</SfAccordion>

In this example, Item 1 and Item 3 are expanded when the page loads.

Note: In Single mode, if multiple items have Expanded="true", only the last one will be expanded.

Using the ExpandedIndices Property

Use ExpandedIndices to specify which items should be expanded using their zero-based indices:

<SfAccordion ExpandMode="ExpandMode.Multiple" @bind-ExpandedIndices="ExpandItems">
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
        <AccordionItem Header="Item 3" Content="Content 3"></AccordionItem>
        <AccordionItem Header="Item 4" Content="Content 4"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    public int[] ExpandItems = new int[] { 0, 2 }; // Expand Item 1 (index 0) and Item 3 (index 2)
}

Benefits of ExpandedIndices:

• Centralized control over expanded items
• Easy to change programmatically
• Works well with data-bound scenarios
• Supports two-way binding with @bind-ExpandedIndices

Dynamic Expansion with Data Binding

Combine ExpandedIndices with data binding for dynamic content:

<SfAccordion @bind-ExpandedIndices="ExpandItems">
    <AccordionItems>
        @foreach (var item in AccordionData)
        {
            <AccordionItem>
                <HeaderTemplate>
                    <div>@item.EmployeeName</div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>
                        <div><b>Employee ID:</b> @item.EmployeeId</div>
                        <div><b>Designation:</b> @item.Designation</div>
                    </div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    public int[] ExpandItems = new int[] { 1, 2 }; // Expand second and third employees
    
    List<AccordionData> AccordionData = new List<AccordionData>() {
        new AccordionData { EmployeeId = 1, EmployeeName = "Laura Callahan", Designation = "Product Manager" },
        new AccordionData { EmployeeId = 3, EmployeeName = "Andrew Fuller", Designation = "Team Lead" },
        new AccordionData { EmployeeId = 4, EmployeeName = "Anne Dodsworth", Designation = "Developer" },
        new AccordionData { EmployeeId = 5, EmployeeName = "Nancy Davolio", Designation = "Product Manager" }
    };

    public class AccordionData {
        public string EmployeeName { get; set; }
        public int EmployeeId { get; set; }
        public string Designation { get; set; }
    }
}

Controlling Expansion Programmatically

Change the expanded state of items in response to user actions or application logic.

Updating ExpandedIndices

Modify the ExpandedIndices array to change which items are expanded:

<SfButton @onclick="ExpandFirst">Expand First Item</SfButton>
<SfButton @onclick="ExpandAll">Expand All</SfButton>
<SfButton @onclick="CollapseAll">Collapse All</SfButton>

<SfAccordion @bind-ExpandedIndices="ExpandItems">
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
        <AccordionItem Header="Item 3" Content="Content 3"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    public int[] ExpandItems = new int[] { };
    
    void ExpandFirst() {
        ExpandItems = new int[] { 0 };
    }
    
    void ExpandAll() {
        ExpandItems = new int[] { 0, 1, 2 };
    }
    
    void CollapseAll() {
        ExpandItems = new int[] { };
    }
}

Toggling Individual Items

Toggle a specific item's expansion state:

<SfButton @onclick="ToggleSecondItem">Toggle Second Item</SfButton>

<SfAccordion @bind-ExpandedIndices="ExpandItems">
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
        <AccordionItem Header="Item 3" Content="Content 3"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    public int[] ExpandItems = new int[] { };
    
    void ToggleSecondItem() {
        var list = ExpandItems.ToList();
        if (list.Contains(1)) {
            list.Remove(1);
        } else {
            list.Add(1);
        }
        ExpandItems = list.ToArray();
    }
}

Best Practices

Choosing the Right Mode

Use Single Mode when:

• Content is mutually exclusive (only one section is relevant at a time)
• Screen space is limited (mobile devices)
• You want to guide users through sequential steps
• Simplifying the UI by reducing visual complexity

Use Multiple Mode when:

• Users may need to reference multiple sections simultaneously
• Content is independent and can be viewed in any order
• Maximizing flexibility is more important than guided flow
• Desktop environments with ample screen space

Initial Expansion Guidelines

• Don't expand all items by default - defeats the purpose of an accordion
• Expand the most important or frequently accessed item - helps users get started
• In Single mode, expand one item - provides immediate context
• In Multiple mode, expand 0-2 items - maintains the collapsed benefit
• Consider user context - expand items based on user role or previous selections

Performance Considerations

• Use LoadOnDemand="true" (default) with expand modes for better performance
• In Single mode, content is loaded when needed (only for the expanded item)
• In Multiple mode with many initially expanded items, consider load impact
• See content-rendering.md for more details

Accessibility

• Both modes support full keyboard navigation
• Screen readers announce expansion state correctly
• Use descriptive headers to help users understand content
• See accessibility-animations.md for complete accessibility guide

Common Scenarios

FAQ with Single Mode

<SfAccordion ExpandMode="ExpandMode.Single">
    <AccordionItems>
        <AccordionItem Expanded="true" Header="What is Blazor?" Content="Blazor is a framework for building interactive web UIs using C# instead of JavaScript."></AccordionItem>
        <AccordionItem Header="How do I install Syncfusion components?" Content="Install the NuGet package and register the Syncfusion service in Program.cs."></AccordionItem>
        <AccordionItem Header="Is the Accordion component accessible?" Content="Yes, it supports WCAG 2.2 compliance with keyboard navigation and screen reader support."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Settings Panel with Multiple Mode

<SfAccordion ExpandMode="ExpandMode.Multiple" @bind-ExpandedIndices="@(new int[]{0})">
    <AccordionItems>
        <AccordionItem Header="General Settings" Content="Configure general application settings here."></AccordionItem>
        <AccordionItem Header="Security Settings" Content="Manage security and privacy settings."></AccordionItem>
        <AccordionItem Header="Notification Settings" Content="Control notification preferences."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Wizard with Single Mode and Controlled Expansion

<SfAccordion ExpandMode="ExpandMode.Single" @bind-ExpandedIndices="CurrentStep">
    <AccordionItems>
        <AccordionItem Header="Step 1: Personal Information">
            <ContentTemplate>
                <!-- Form fields for personal info -->
                <SfButton @onclick="() => CurrentStep = new int[]{1}">Next</SfButton>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem Header="Step 2: Contact Details">
            <ContentTemplate>
                <!-- Form fields for contact info -->
                <SfButton @onclick="() => CurrentStep = new int[]{2}">Next</SfButton>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem Header="Step 3: Review and Submit">
            <ContentTemplate>
                <!-- Review and submit -->
                <SfButton @onclick="Submit">Submit</SfButton>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    public int[] CurrentStep = new int[] { 0 };
    
    void Submit() {
        // Handle submission
    }
}

Related Topics

• Getting Started - Initial setup and basic implementation
• Content Rendering - LoadOnDemand and performance optimization
• Data Binding and Events - Handling expansion events
• How-To Scenarios - Practical examples including wizards

Getting Started with Blazor Accordion Component

This guide covers the complete setup process for implementing the Syncfusion Blazor Accordion component in your Blazor WebAssembly application.

Table of Contents

• Installing Syncfusion Blazor Packages
• Importing Namespaces
• Registering Syncfusion Blazor Service
• Adding Stylesheet and Script References
• Creating Your First Accordion
• Using Templates for Custom Content
• Initial Expansion State
• Complete Working Example
• Next Steps
• Troubleshooting

Installing Syncfusion Blazor Packages

The Accordion component requires two NuGet packages:

1. Syncfusion.Blazor.Navigations - Contains the Accordion component 2. Syncfusion.Blazor.Themes - Provides theme stylesheets

Installation Methods

Using NuGet Package Manager (Visual Studio):

• Tools → NuGet Package Manager → Manage NuGet Packages for Solution
• Search for and install both packages

Using Package Manager Console:

Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}

Using .NET CLI:

dotnet add package Syncfusion.Blazor.Navigations
dotnet add package Syncfusion.Blazor.Themes

All Syncfusion Blazor packages are available on nuget.org.

Importing Namespaces

After installing the packages, import the required namespaces in your ~/_Imports.razor file:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations

This makes the Accordion component and related classes available throughout your application.

Registering Syncfusion Blazor Service

Register the Syncfusion Blazor Service in your Program.cs file:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

This registration enables Syncfusion components to work properly in your application.

Adding Stylesheet and Script References

Add theme stylesheet and script references to your ~/index.html file (Blazor WebAssembly):

<head>
    <!-- Syncfusion Blazor Theme -->
    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>

<body>
    <!-- Syncfusion Blazor Script -->
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

Available Themes

You can use any of these theme files:

• bootstrap5.css
• material.css
• fabric.css
• fluent.css
• fluent2.css
• tailwind.css
• material3.css

Note: Theme stylesheets can be referenced via:

• Static Web Assets (recommended for production)
• CDN (Content Delivery Network)
• CRG (Custom Resource Generator) for optimized loading

Creating Your First Accordion

Add the Accordion component to any Blazor page (e.g., ~/Pages/Index.razor):

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="ASP.NET" Content="Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services."></AccordionItem>
        <AccordionItem Header="ASP.NET MVC" Content="The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller."></AccordionItem>
        <AccordionItem Header="JavaScript" Content="JavaScript (JS) is an interpreted computer programming language originally implemented as part of web browsers."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Accordion component will render with three collapsible items.

Using Templates for Custom Content

For more control over header and content presentation, use templates:

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem>
            <HeaderTemplate>
                <div>Employee Information</div>
            </HeaderTemplate>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <div><b>Name:</b> Margaret Peacock</div>
                    <div><b>Position:</b> Sales Coordinator</div>
                    <div><b>Department:</b> Seattle, WA</div>
                </div>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem>
            <HeaderTemplate>
                <div>Contact Details</div>
            </HeaderTemplate>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <div><b>Email:</b> margaret@example.com</div>
                    <div><b>Phone:</b> (206) 555-0100</div>
                </div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

Template Benefits

HeaderTemplate:

• Add custom HTML structure to headers
• Include icons, badges, or buttons
• Apply custom styling and layout

ContentTemplate:

• Render complex content with rich formatting
• Include images, tables, or other components
• Implement dynamic content with data binding

Initial Expansion State

Control which items are expanded when the accordion loads:

Using Expanded Property

Set Expanded="true" on individual items:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Expanded="true" Header="Item 1" Content="This item is expanded by default"></AccordionItem>
        <AccordionItem Header="Item 2" Content="This item is collapsed by default"></AccordionItem>
    </AccordionItems>
</SfAccordion>

Using ExpandedIndices Property

Specify multiple items to expand using their zero-based indices:

<SfAccordion @bind-ExpandedIndices="ExpandItems">
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
        <AccordionItem Header="Item 2" Content="Content 2"></AccordionItem>
        <AccordionItem Header="Item 3" Content="Content 3"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    public int[] ExpandItems = new int[] { 0, 2 }; // Expand first and third items
}

Complete Working Example

Here's a complete example combining all concepts:

@page "/accordion-demo"
@using Syncfusion.Blazor.Navigations

<h3>Accordion Component Demo</h3>

<SfAccordion>
    <AccordionItems>
        <AccordionItem Expanded="true">
            <HeaderTemplate>
                <div><strong>Getting Started</strong></div>
            </HeaderTemplate>
            <ContentTemplate>
                <div style="padding: 15px;">
                    <p>Welcome to the Syncfusion Blazor Accordion component.</p>
                    <ul>
                        <li>Easy to integrate</li>
                        <li>Highly customizable</li>
                        <li>Accessible and responsive</li>
                    </ul>
                </div>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem>
            <HeaderTemplate>
                <div><strong>Features</strong></div>
            </HeaderTemplate>
            <ContentTemplate>
                <div style="padding: 15px;">
                    <p>Key features of the component:</p>
                    <ul>
                        <li>Single and multiple expand modes</li>
                        <li>Customizable animations</li>
                        <li>Event handling support</li>
                        <li>Template-based rendering</li>
                    </ul>
                </div>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem>
            <HeaderTemplate>
                <div><strong>Documentation</strong></div>
            </HeaderTemplate>
            <ContentTemplate>
                <div style="padding: 15px;">
                    <p>Explore comprehensive documentation and examples to learn more about implementing the Accordion component in your applications.</p>
                </div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

Next Steps

Now that you've successfully created your first Accordion component, explore these topics:

• Expand Modes: Learn about single vs. multiple expand modes in expand-modes.md
• Events: Handle user interactions in data-binding-events.md
• Customization: Apply custom styles in customization-styling.md
• Accessibility: Implement keyboard navigation and ARIA support in accessibility-animations.md

Troubleshooting

Component not rendering:

• Verify NuGet packages are installed
• Check namespace imports in _Imports.razor
• Ensure Syncfusion service is registered in Program.cs
• Confirm stylesheet and script references are added

Styling issues:

• Verify theme CSS is loaded correctly
• Check browser console for CSS loading errors
• Ensure the correct theme file is referenced

Build errors:

• Clean and rebuild the solution
• Verify package versions are compatible
• Check for namespace conflicts

How-To Scenarios for Blazor Accordion Component

Table of Contents

• Add Icons to Accordion Headers
• Create Nested Accordions
• Add and Remove Items Dynamically
• Create a Wizard Using Accordion
• Enable or Disable Accordion Items
• Integrate Components Inside Accordion
• Prevent Expand or Collapse
• Show or Hide Accordion Items

Add Icons to Accordion Headers

Add custom icons to accordion headers using the IconCss property to provide visual cues for different content types.

Basic Icon Implementation

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Athletics" IconCss="e-icons e-people" Expanded="true" Content="Marathon, Javelin Throw, Discus Throw, High Jump, Long Jump"></AccordionItem>
        <AccordionItem Header="Water Games" IconCss="e-icons e-water-drop" Content="Diving, Swimming, Marathon Swimming, Synchronized Swimming, Water Polo"></AccordionItem>
        <AccordionItem Header="Racing" IconCss="e-icons e-flag" Content="Cycling BMX, Cycling Mountain Bike, Cycle Racing, Sailing, Rowing"></AccordionItem>
    </AccordionItems>
</SfAccordion>

Custom Icon Fonts

Use custom icon fonts by defining @font-face and applying via IconCss:

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Documents" IconCss="custom-icon doc-icon" Content="Document content here"></AccordionItem>
        <AccordionItem Header="Images" IconCss="custom-icon img-icon" Content="Image content here"></AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    @@font-face {
        font-family: 'custom-icons';
        src: url('path/to/custom-icons.ttf') format('truetype');
    }
    
    .custom-icon {
        font-family: 'custom-icons';
        font-size: 16px;
        padding-right: 10px;
    }
    
    .doc-icon::before {
        content: "\e001";
    }
    
    .img-icon::before {
        content: "\e002";
    }
</style>

SVG Icons

Use SVG icons within HeaderTemplate for more flexibility:

<SfAccordion>
    <AccordionItems>
        <AccordionItem>
            <HeaderTemplate>
                <div style="display: flex; align-items: center;">
                    <svg width="20" height="20" style="margin-right: 10px;">
                        <circle cx="10" cy="10" r="8" fill="#2196F3"/>
                    </svg>
                    <span>Custom SVG Icon</span>
                </div>
            </HeaderTemplate>
            <ContentTemplate>
                <div>Content with SVG icon in header</div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

Best Practices

• Use consistent icon sizes across all headers
• Choose icons that clearly represent the content
• Ensure icons have sufficient contrast with background
• Provide meaningful header text alongside icons (don't rely on icons alone)
• Test icon visibility in different themes

Create Nested Accordions

Create hierarchical collapsible sections by placing accordion components within ContentTemplate.

Two-Level Nesting

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Video">
            <ContentTemplate>
                <SfAccordion>
                    <AccordionItems>
                        <AccordionItem Header="Video Track 1" Content="Video content 1"></AccordionItem>
                        <AccordionItem Header="Video Track 2" Content="Video content 2"></AccordionItem>
                    </AccordionItems>
                </SfAccordion>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem Header="Music">
            <ContentTemplate>
                <SfAccordion>
                    <AccordionItems>
                        <AccordionItem Header="Music Track 1" Content="Music content 1"></AccordionItem>
                        <AccordionItem Header="Music Track 2" Content="Music content 2"></AccordionItem>
                    </AccordionItems>
                </SfAccordion>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

Three-Level Nesting

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Media">
            <ContentTemplate>
                <SfAccordion>
                    <AccordionItems>
                        <AccordionItem Header="Music">
                            <ContentTemplate>
                                <SfAccordion>
                                    <AccordionItems>
                                        <AccordionItem Header="Rock" Content="Rock music files"></AccordionItem>
                                        <AccordionItem Header="Jazz" Content="Jazz music files"></AccordionItem>
                                    </AccordionItems>
                                </SfAccordion>
                            </ContentTemplate>
                        </AccordionItem>
                        <AccordionItem Header="Videos" Content="Video files"></AccordionItem>
                    </AccordionItems>
                </SfAccordion>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

Styling Nested Accordions

/* Remove extra padding from nested accordions */
.e-accordion .e-acrdn-panel.e-nested {
    padding: 0;
}

/* Differentiate nested levels with indentation */
.e-accordion .e-accordion .e-acrdn-header {
    padding-left: 30px;
    background-color: #F5F5F5;
}

/* Further indent for third level */
.e-accordion .e-accordion .e-accordion .e-acrdn-header {
    padding-left: 50px;
    background-color: #EEEEEE;
}

Use Cases

• File/folder navigation systems
• Multi-level category menus
• Hierarchical documentation
• Organizational structures
• Nested settings panels

Add and Remove Items Dynamically

Dynamically manage accordion items by manipulating the underlying data collection.

Add Items

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="AddItem">Add Item</SfButton>

<SfAccordion>
    <AccordionItems>
        @foreach (var item in AccordionData)
        {
            <AccordionItem @bind-Expanded="item.IsExpanded">
                <HeaderTemplate>
                    <div>@item.Header</div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>@item.Content</div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<AccordionItemData> AccordionData = new List<AccordionItemData>() {
        new AccordionItemData { Header = "ASP.NET", Content = "ASP.NET content", IsExpanded = true },
        new AccordionItemData { Header = "ASP.NET MVC", Content = "MVC content", IsExpanded = false }
    };

    void AddItem() {
        AccordionData.Add(new AccordionItemData {
            Header = "JavaScript",
            Content = "JavaScript programming language content",
            IsExpanded = false
        });
    }

    public class AccordionItemData {
        public string Header { get; set; }
        public string Content { get; set; }
        public bool IsExpanded { get; set; }
    }
}

Remove Items

<SfButton @onclick="RemoveFirst">Remove First Item</SfButton>
<SfButton @onclick="RemoveLast">Remove Last Item</SfButton>

<SfAccordion>
    <AccordionItems>
        @foreach (var item in AccordionData)
        {
            <AccordionItem Header="@item.Header" Content="@item.Content"></AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<AccordionItemData> AccordionData = new List<AccordionItemData>();

    void RemoveFirst() {
        if (AccordionData.Count > 0) {
            AccordionData.RemoveAt(0);
        }
    }

    void RemoveLast() {
        if (AccordionData.Count > 0) {
            AccordionData.RemoveAt(AccordionData.Count - 1);
        }
    }
}

Add/Remove with User Input

@using Syncfusion.Blazor.Inputs

<SfTextBox @bind-Value="NewItemHeader" Placeholder="Header"></SfTextBox>
<SfTextBox @bind-Value="NewItemContent" Placeholder="Content"></SfTextBox>
<SfButton @onclick="AddCustomItem">Add</SfButton>

<SfAccordion>
    <AccordionItems>
        @foreach (var item in Items)
        {
            <AccordionItem>
                <HeaderTemplate>
                    <div style="display: flex; justify-content: space-between; width: 100%;">
                        <span>@item.Header</span>
                        <SfButton CssClass="e-small" @onclick="() => RemoveItem(item)">Remove</SfButton>
                    </div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>@item.Content</div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    string NewItemHeader = "";
    string NewItemContent = "";
    List<AccordionItemData> Items = new List<AccordionItemData>();

    void AddCustomItem() {
        if (!string.IsNullOrEmpty(NewItemHeader)) {
            Items.Add(new AccordionItemData { Header = NewItemHeader, Content = NewItemContent });
            NewItemHeader = "";
            NewItemContent = "";
        }
    }

    void RemoveItem(AccordionItemData item) {
        Items.Remove(item);
    }
}

Create a Wizard Using Accordion

Build multi-step wizards using accordion with controlled expansion and validation.

Sequential Wizard

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

<SfAccordion ExpandMode="ExpandMode.Single" @bind-ExpandedIndices="CurrentStep">
    <AccordionEvents Expanding="OnExpanding"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Disabled="@(CurrentStep[0] != 0)">
            <HeaderTemplate>
                <div>Step 1: Personal Information</div>
            </HeaderTemplate>
            <ContentTemplate>
                <div style="padding: 15px;">
                    <SfTextBox @bind-Value="PersonalInfo.Name" Placeholder="Name"></SfTextBox>
                    <br /><br />
                    <SfTextBox @bind-Value="PersonalInfo.Email" Placeholder="Email"></SfTextBox>
                    <br /><br />
                    <SfButton @onclick="GoToStep2">Next</SfButton>
                </div>
            </ContentTemplate>
        </AccordionItem>
        
        <AccordionItem Disabled="@Step2Disabled">
            <HeaderTemplate>
                <div>Step 2: Address Details</div>
            </HeaderTemplate>
            <ContentTemplate>
                <div style="padding: 15px;">
                    <SfTextBox @bind-Value="AddressInfo.Street" Placeholder="Street"></SfTextBox>
                    <br /><br />
                    <SfTextBox @bind-Value="AddressInfo.City" Placeholder="City"></SfTextBox>
                    <br /><br />
                    <SfButton @onclick="GoToStep1">Back</SfButton>
                    <SfButton @onclick="GoToStep3">Next</SfButton>
                </div>
            </ContentTemplate>
        </AccordionItem>
        
        <AccordionItem Disabled="@Step3Disabled">
            <HeaderTemplate>
                <div>Step 3: Review and Submit</div>
            </HeaderTemplate>
            <ContentTemplate>
                <div style="padding: 15px;">
                    <p><b>Name:</b> @PersonalInfo.Name</p>
                    <p><b>Email:</b> @PersonalInfo.Email</p>
                    <p><b>Street:</b> @AddressInfo.Street</p>
                    <p><b>City:</b> @AddressInfo.City</p>
                    <SfButton @onclick="GoToStep2">Back</SfButton>
                    <SfButton @onclick="Submit">Submit</SfButton>
                </div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    int[] CurrentStep = new int[] { 0 };
    bool Step2Disabled = true;
    bool Step3Disabled = true;

    PersonalData PersonalInfo = new PersonalData();
    AddressData AddressInfo = new AddressData();

    void OnExpanding(ExpandEventArgs args) {
        // Prevent skipping steps
        if (args.Index == 1 && Step2Disabled) {
            args.Cancel = true;
        }
        if (args.Index == 2 && Step3Disabled) {
            args.Cancel = true;
        }
    }

    void GoToStep2() {
        if (!string.IsNullOrEmpty(PersonalInfo.Name) && !string.IsNullOrEmpty(PersonalInfo.Email)) {
            Step2Disabled = false;
            CurrentStep = new int[] { 1 };
        }
    }

    void GoToStep3() {
        if (!string.IsNullOrEmpty(AddressInfo.Street) && !string.IsNullOrEmpty(AddressInfo.City)) {
            Step3Disabled = false;
            CurrentStep = new int[] { 2 };
        }
    }

    void GoToStep1() {
        CurrentStep = new int[] { 0 };
    }

    void Submit() {
        // Handle submission
        Console.WriteLine("Form submitted!");
    }

    public class PersonalData {
        public string Name { get; set; }
        public string Email { get; set; }
    }

    public class AddressData {
        public string Street { get; set; }
        public string City { get; set; }
    }
}

Enable or Disable Accordion Items

Control the enabled/disabled state of accordion items dynamically.

Toggle Disabled State

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="ToggleFirstItem">Enable/Disable First Item</SfButton>

<SfAccordion>
    <AccordionItems>
        <AccordionItem Disabled="@IsDisabled" Expanded="true" Header="ASP.NET" Content="Microsoft ASP.NET is a set of technologies for building Web applications."></AccordionItem>
        <AccordionItem Header="ASP.NET MVC" Content="The Model-View-Controller pattern separates an application into three components."></AccordionItem>
        <AccordionItem Header="JavaScript" Content="JavaScript is an interpreted programming language."></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    bool IsDisabled = false;

    void ToggleFirstItem() {
        IsDisabled = !IsDisabled;
    }
}

Conditional Disabling

<SfAccordion>
    <AccordionItems>
        @foreach (var item in Items)
        {
            <AccordionItem Disabled="@item.IsLocked" Header="@item.Title" Content="@item.Content"></AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<ItemData> Items = new List<ItemData>() {
        new ItemData { Title = "Free Content", Content = "Available to all", IsLocked = false },
        new ItemData { Title = "Premium Content", Content = "Requires subscription", IsLocked = true }
    };

    public class ItemData {
        public string Title { get; set; }
        public string Content { get; set; }
        public bool IsLocked { get; set; }
    }
}

Integrate Components Inside Accordion

Embed other Syncfusion or custom components within accordion panels.

TreeView Integration

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem>
            <HeaderTemplate>
                <div>Documents</div>
            </HeaderTemplate>
            <ContentTemplate>
                <SfTreeView TValue="TreeItem">
                    <TreeViewFieldsSettings TValue="TreeItem" Id="Id" DataSource="@Documents" Text="Name" ParentID="ParentId" HasChildren="HasChildren" Expanded="Expanded"></TreeViewFieldsSettings>
                </SfTreeView>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    List<TreeItem> Documents = new List<TreeItem>() {
        new TreeItem { Id = "1", Name = "Documents", HasChildren = true, Expanded = true },
        new TreeItem { Id = "2", ParentId = "1", Name = "File1.docx" },
        new TreeItem { Id = "3", ParentId = "1", Name = "File2.pdf" }
    };

    public class TreeItem {
        public string Id { get; set; }
        public string ParentId { get; set; }
        public string Name { get; set; }
        public bool HasChildren { get; set; }
        public bool Expanded { get; set; }
    }
}

Grid Integration

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Employee Data">
            <ContentTemplate>
                <SfGrid DataSource="@Employees">
                    <GridColumns>
                        <GridColumn Field="@nameof(Employee.Id)" HeaderText="ID" Width="100"></GridColumn>
                        <GridColumn Field="@nameof(Employee.Name)" HeaderText="Name" Width="150"></GridColumn>
                        <GridColumn Field="@nameof(Employee.Department)" HeaderText="Department" Width="150"></GridColumn>
                    </GridColumns>
                </SfGrid>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    List<Employee> Employees = new List<Employee>() {
        new Employee { Id = 1, Name = "John Doe", Department = "IT" },
        new Employee { Id = 2, Name = "Jane Smith", Department = "HR" }
    };

    public class Employee {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
    }
}

Prevent Expand or Collapse

Prevent accordion items from expanding or collapsing under specific conditions.

Prevent Expansion Based on Conditions

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.DropDowns

<SfAccordion>
    <AccordionEvents Expanding="OnExpanding" Collapsing="OnCollapsing"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Expanded="true">
            <HeaderTemplate>
                <SfDropDownList TValue="string" TItem="Country" Placeholder="Select a country" DataSource="@Countries" Width="200">
                    <DropDownListEvents TValue="string" TItem="Country" OnOpen="OnDropdownOpen" OnClose="OnDropdownClose"></DropDownListEvents>
                    <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
                </SfDropDownList>
            </HeaderTemplate>
            <ContentTemplate>
                <div>Dropdown content</div>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem>
            <HeaderTemplate>
                <SfButton @onclick="ButtonClick">Click Me</SfButton>
            </HeaderTemplate>
            <ContentTemplate>
                <div>Button content</div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    bool IsDropdownOpen = false;
    bool IsButtonClicked = false;

    List<Country> Countries = new List<Country>() {
        new Country { Name = "Australia" },
        new Country { Name = "United States" }
    };

    void OnDropdownOpen() {
        IsDropdownOpen = true;
    }

    void OnDropdownClose() {
        IsDropdownOpen = false;
    }

    void ButtonClick() {
        IsButtonClicked = true;
    }

    void OnExpanding(ExpandEventArgs args) {
        if (IsButtonClicked || IsDropdownOpen) {
            args.Cancel = true;
            ResetFlags();
        }
    }

    void OnCollapsing(CollapseEventArgs args) {
        if (IsButtonClicked || IsDropdownOpen) {
            args.Cancel = true;
            ResetFlags();
        }
    }

    void ResetFlags() {
        IsButtonClicked = false;
        IsDropdownOpen = false;
    }

    public class Country {
        public string Name { get; set; }
    }
}

Show or Hide Accordion Items

Dynamically show or hide accordion items based on conditions.

Using Conditional Rendering

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="ToggleItem">Show/Hide Middle Item</SfButton>

<SfAccordion>
    <AccordionItems>
        <AccordionItem Expanded="true" Header="ASP.NET" Content="ASP.NET content"></AccordionItem>
        
        @if (ShowItem)
        {
            <AccordionItem Header="ASP.NET MVC" Content="MVC content"></AccordionItem>
        }
        
        <AccordionItem Header="JavaScript" Content="JavaScript content"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    bool ShowItem = true;

    void ToggleItem() {
        ShowItem = !ShowItem;
    }
}

Using Visible Property

<SfButton @onclick="ToggleVisibility">Show/Hide Second Item</SfButton>

<SfAccordion>
    <AccordionItems>
        <AccordionItem Expanded="true" Header="ASP.NET" Content="ASP.NET content"></AccordionItem>
        <AccordionItem Visible="@IsVisible" Header="ASP.NET MVC" Content="MVC content"></AccordionItem>
        <AccordionItem Header="JavaScript" Content="JavaScript content"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    bool IsVisible = true;

    void ToggleVisibility() {
        IsVisible = !IsVisible;
    }
}

Conditional Visibility Based on Data

<SfAccordion>
    <AccordionItems>
        @foreach (var item in Items)
        {
            <AccordionItem Visible="@item.IsVisible" Header="@item.Header" Content="@item.Content"></AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<ItemData> Items = new List<ItemData>() {
        new ItemData { Header = "Always Visible", Content = "Content 1", IsVisible = true },
        new ItemData { Header = "Conditionally Visible", Content = "Content 2", IsVisible = false },
        new ItemData { Header = "Always Visible", Content = "Content 3", IsVisible = true }
    };

    public class ItemData {
        public string Header { get; set; }
        public string Content { get; set; }
        public bool IsVisible { get; set; }
    }
}

Related Topics

• Getting Started - Basic accordion setup
• Expand Modes - Controlling expansion behavior
• Data Binding and Events - Dynamic content and event handling
• Customization and Styling - CSS customization for scenarios
• Accessibility and Animations - Ensuring accessible implementations