Skip to content

This sample explains how to create and configure the Blazor Accordion component in the Blazor Server Application.

Notifications You must be signed in to change notification settings

SyncfusionExamples/Create-an-Accordion-Component-in-a-Blazor-Server-Application

Repository files navigation

Create an Accordion Component in a Blazor Server Application

The Blazor Accordion is a container-based component with vertically collapsible panels (vertical accordion) and stacked headers that expand or collapse one or more panels at a time within the available space. This is a quick-start project that helps you create Blazor Accordion provided by Syncfusion. This example explains how to create a Blazor application and add the Syncfusion Blazor package. It also shows how to add the Syncfusion Blazor Accordion component to a Blazor server application and demonstrates prominent features like expand modes and customizing Accordion UI using templates.

Prerequisites

  • Visual Studio 2022

How to run the project

  • Checkout this project to a location in your disk.
  • Open the solution file using the Visual Studio 2022.
  • Restore the NuGet packages by rebuilding the solution.
  • Run the project.

Further help

For more help, check the ASP.NET Core Blazor documentation.

Features and Benefits

Expand mode

A single panel or multiple panels can expand or collapse (panel toggle) at a time by clicking the panel header or programmatically.

Animation

The collapsible panels support several types of built-in, fancy animation for panel expanding and collapsing actions. Blazor Animation behavior is customizable.

Content reader mode

Accordion provides support to render the content of all AccordionItem at initial load which will be maintained in DOM. For that, disable the Load On Demand property to load all the contents.

Collapsible mode

Collapse all the panels at once. With customization options, a specific panel is set to be in an open state while the rest of the panels are collapsed.

Data binding

Accordion component provides an option to get the accordion items from the local data. It can be done through iteration of the Accordion Items using conditional foreach loop. Accordion only supports the local data for data binding.

Icon support

Add prefix icons or images to the panel header. The default expand and collapse icon used in the header is customizable.

Related links

Learn More about Blazor Accordion

Download Free Trial

Pricing

Documentation

View Demos

Community Forums

Suggest a feature or report a bug

Online example

Video Tutorials

Visual Studio 2019 (version 16.4+)

.NET Core SDK 3.1.201+

Knowledge base

About Syncfusion Blazor Components

The Syncfusion's Blazor components library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Accordion, we provide popular Blazor Components such as DataGrid, Charts, Scheduler, Diagram, and Word Processor.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 27,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1700+ components and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, JavaScript, and MAUI(Preview)), and desktop development (WinForms, WPF, WinUI,UWP, Flutter. and MAUI(Preview)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.


[email protected] | www.syncfusion.com| Toll Free: 1-888-9 DOTNET

About

This sample explains how to create and configure the Blazor Accordion component in the Blazor Server Application.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published