RadzenAccordion Class

An accordion component that displays collapsible content panels with only one or multiple panels expanded at a time. RadzenAccordion organizes content into expandable sections, saving vertical space while keeping all content accessible. Ideal for FAQs, settings panels, grouped content, or any scenario where showing all content at once would be overwhelming. Features single/multiple expand control, optional icons in panel headers, programmatic control via SelectedIndex two-way binding, Expand and Collapse event callbacks, keyboard navigation (Arrow keys, Space/Enter, Home/End), and disabled item support. By default, only one panel can be expanded at a time (Multiple = false). Set Multiple = true to allow multiple panels to be expanded simultaneously.

Inheritance

Object

ComponentBase

RadzenComponent

RadzenAccordion

Implements

IComponent

IHandleEvent

IHandleAfterRender

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenAccordion : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender

Examples

Basic accordion (single expand mode):

<RadzenAccordion>
    <Items>
        <RadzenAccordionItem Text="Personal Information" Icon="person">
            Name, email, address fields...
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Account Settings" Icon="settings">
            Password, preferences, notifications...
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Billing" Icon="payment">
            Payment methods, invoices...
        </RadzenAccordionItem>
    </Items>
</RadzenAccordion>

Accordion with multiple expand and events:

<RadzenAccordion Multiple="true" Expand=@OnExpand Collapse=@OnCollapse>
    <Items>
        <RadzenAccordionItem Text="FAQ 1" Selected="true">Answer 1</RadzenAccordionItem>
        <RadzenAccordionItem Text="FAQ 2">Answer 2</RadzenAccordionItem>
    </Items>
</RadzenAccordion>

Constructors

RadzenAccordionlink

An accordion component that displays collapsible content panels with only one or multiple panels expanded at a time. RadzenAccordion organizes content into expandable sections, saving vertical space while keeping all content accessible. Ideal for FAQs, settings panels, grouped content, or any scenario where showing all content at once would be overwhelming. Features single/multiple expand control, optional icons in panel headers, programmatic control via SelectedIndex two-way binding, Expand and Collapse event callbacks, keyboard navigation (Arrow keys, Space/Enter, Home/End), and disabled item support. By default, only one panel can be expanded at a time (Multiple = false). Set Multiple = true to allow multiple panels to be expanded simultaneously.

Declaration
public RadzenAccordion()

Properties

AccordionItemslink

Gets the collection of RadzenAccordionItem components that belong to this accordion.

Declaration
public IReadOnlyList<RadzenAccordionItem> AccordionItems { get; }
Property Value
Type Description
IReadOnlyList<RadzenAccordionItem>Gets the collection of RadzenAccordionItem components that belong to this accordion.

Collapselink

Gets or sets the callback invoked when an accordion item is collapsed. Receives the index of the collapsed item as a parameter.

Declaration
public EventCallback<int> Collapse { get; set; }
Property Value
Type Description
EventCallback<int>Gets or sets the callback invoked when an accordion item is collapsed. Receives the index of the collapsed item as a parameter.

Expandlink

Gets or sets the callback invoked when an accordion item is expanded. Receives the index of the expanded item as a parameter.

Declaration
public EventCallback<int> Expand { get; set; }
Property Value
Type Description
EventCallback<int>Gets or sets the callback invoked when an accordion item is expanded. Receives the index of the expanded item as a parameter.

Itemslink

Gets or sets the render fragment containing RadzenAccordionItem components that define the accordion panels. Each RadzenAccordionItem represents one expandable panel with its header and content.

Declaration
public RenderFragment Items { get; set; }
Property Value
Type Description
RenderFragmentGets or sets the render fragment containing RadzenAccordionItem components that define the accordion panels. Each RadzenAccordionItem represents one expandable panel with its header and content.

Multiplelink

Gets or sets whether multiple accordion items can be expanded simultaneously. When false (default), expanding one item automatically collapses others. When true, users can expand multiple items independently.

Declaration
public bool Multiple { get; set; }
Property Value
Type Description
boolGets or sets whether multiple accordion items can be expanded simultaneously. When false (default), expanding one item automatically collapses others. When true, users can expand multiple items independently.

SelectedIndexlink

Gets or sets the zero-based index of the currently expanded item. Use with @bind-SelectedIndex for two-way binding to programmatically control which item is expanded. In multiple expand mode, this represents the last expanded item.

Declaration
public int SelectedIndex { get; set; }
Property Value
Type Description
intGets or sets the zero-based index of the currently expanded item. Use with @bind-SelectedIndex for two-way binding to programmatically control which item is expanded. In multiple expand mode, this represents the last expanded item.

SelectedIndexChangedlink

Gets or sets the callback invoked when the selected index changes. Used for two-way binding with @bind-SelectedIndex.

Declaration
public EventCallback<int> SelectedIndexChanged { get; set; }
Property Value
Type Description
EventCallback<int>Gets or sets the callback invoked when the selected index changes. Used for two-way binding with @bind-SelectedIndex.

Methods

AddItemlink

Adds the item.

Declaration
public void AddItem(RadzenAccordionItem item)
Parameters
Type Name Description
RadzenAccordionItem item The item.

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

CollapseAlllink

Collapses all accordion items.

Declaration
public Task CollapseAll()
Returns
Type Description
Task

ExpandAlllink

Expands all accordion items.

Declaration
public Task ExpandAll()
Returns
Type Description
Task

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

IsSelectedlink

Determines whether the specified index is selected.

Declaration
protected bool IsSelected(int index, RadzenAccordionItem item)
Parameters
Type Name Description
int index The index.
RadzenAccordionItem item The item.
Returns
Type Description
booltrue if the specified index is selected; otherwise, false.

ItemAriaLabellink

Gets the item's aria-label attribute value.

Declaration
protected string ItemAriaLabel(int index, RadzenAccordionItem item)
Parameters
Type Name Description
int index The index.
RadzenAccordionItem item The item.
Returns
Type Description
stringThe item's collapse or expand aria-label value depending on if the item is expanded or collapsed. If the relevant aria-label is null or whitespace this method returns "Expand" or "Collapse".

ItemTitlelink

Gets the item's title attribute value.

Declaration
protected string ItemTitle(int index, RadzenAccordionItem item)
Parameters
Type Name Description
int index The index.
RadzenAccordionItem item The item.
Returns
Type Description
stringThe item's collapse or expand title value depending on if the item is expanded or collapsed. If the relevant title is null or whitespace this method returns "Expand" or "Collapse".

OnInitializedlink

Declaration
protected override void OnInitialized()

Refreshlink

Refreshes this instance.

Declaration
public void Refresh()

RemoveItemlink

Removes the item.

Declaration
public void RemoveItem(RadzenAccordionItem item)
Parameters
Type Name Description
RadzenAccordionItem item The item.

SetParametersAsynclink

Declaration
public override Task SetParametersAsync(ParameterView parameters)
Parameters
Type Name Description
ParameterView parameters
Returns
Type Description
Task
An error has occurred. This app may no longer respond until reloaded. Reload 🗙