# 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.

Namespace: [Radzen.Blazor](https://blazor.radzen.com/docs/api/Radzen.Blazor.md)

Assembly: Radzen.Blazor.dll

## Inheritance

- Object
- ComponentBase
- [RadzenComponent](https://blazor.radzen.com/docs/api/Radzen.RadzenComponent.md)
- RadzenAccordion

## Implements

- IComponent
- IHandleEvent
- IHandleAfterRender

## Syntax

```csharp
public class RadzenAccordion : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender
```

## Examples

Basic accordion (single expand mode):

```razor
<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:

```razor
<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

| Constructor | Description |
|-------------|-------------|
| `public RadzenAccordion()` | 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. |

## Properties

| Property | Type | Description |
|------|------|-------------|
| AccordionItems | `IReadOnlyList<RadzenAccordionItem>` | Gets the collection of [RadzenAccordionItem](https://blazor.radzen.com/docs/api/Radzen.Blazor.RadzenAccordionItem.md) components that belong to this accordion. |
| AriaLevel | `int` | Gets or sets the ARIA heading level applied to each accordion header. The header button is wrapped in an element with role="heading" and this aria-level so screen-reader users can navigate the accordion by heading, as required by the WAI-ARIA Accordion pattern. |
| Collapse | `EventCallback<int>` | Gets or sets the callback invoked when an accordion item is collapsed. Receives the index of the collapsed item as a parameter. |
| Expand | `EventCallback<int>` | Gets or sets the callback invoked when an accordion item is expanded. Receives the index of the expanded item as a parameter. |
| Items | `RenderFragment` | 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. |
| Multiple | `bool` | 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. |
| RenderMode | [`AccordionRenderMode`](https://blazor.radzen.com/docs/api/Radzen.AccordionRenderMode.md) | Gets or sets the render mode of the accordion. When set to Server (default), the component re-renders on every expand/collapse. When set to Client, all items are rendered and expand/collapse is handled with JavaScript. |
| SelectedIndex | `int` | 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. |
| SelectedIndexChanged | `EventCallback<int>` | Gets or sets the callback invoked when the selected index changes. Used for two-way binding with @bind-SelectedIndex. |

## Methods

| Method | Returns | Description |
|------|---------|-------------|
| `AddItem(RadzenAccordionItem item)` | `void` | Adds the item. Parameters: `item`: The item. |
| `BuildRenderTree(Rendering.RenderTreeBuilder __builder)` | `void` |  |
| `CollapseAll()` | `Task` | Collapses all accordion items. |
| `Dispose()` | `void` |  |
| `ExpandAll()` | `Task` | Expands all accordion items. |
| `GetComponentCssClass()` | `string` |  |
| `IsSelected(int index, RadzenAccordionItem item)` | `bool` | Determines whether the specified index is selected. Parameters: `index`: The index. `item`: The item. Returns: true if the specified index is selected; otherwise, false. |
| `ItemAriaLabel(int index, RadzenAccordionItem item)` | `string` | Gets the item's aria-label attribute value. Parameters: `index`: The index. `item`: The item. Returns: The 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". |
| `ItemTitle(int index, RadzenAccordionItem item)` | `string` | Gets the item's title attribute value. Parameters: `index`: The index. `item`: The item. Returns: The 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". |
| `OnAfterRenderAsync(bool firstRender)` | `Task` |  |
| `Refresh()` | `void` | Refreshes this instance. |
| `RemoveItem(RadzenAccordionItem item)` | `void` | Removes the item. Parameters: `item`: The item. |
| `SetParametersAsync(ParameterView parameters)` | `Task` |  |
| `ShouldRender()` | `bool` |  |

## Inherited Members

- From [RadzenComponent](https://blazor.radzen.com/docs/api/Radzen.RadzenComponent.md): AddContextMenu, Attributes, ContextMenu, Culture, CurrentStyle, Debounce, DefaultCulture, DefaultUICulture, Element, GetCssClass, GetId, GetIdAttribute, IsJSRuntimeAvailable, JSRuntime, Localize, MouseEnter, MouseLeave, OnBecameInvisible, OnContextMenu, OnInitialized, OnMouseEnter, OnMouseLeave, RaiseContextMenu, RaiseMouseEnter, RaiseMouseLeave, Reference, Style, UICulture, UniqueID, Visible
- From ComponentBase: Assets, AssignedRenderMode, DispatchExceptionAsync, InvokeAsync, OnAfterRender, OnInitializedAsync, OnParametersSet, OnParametersSetAsync, RendererInfo, StateHasChanged