Accordion Component

The Accordion is a container component that displays collapsible content panes. Only one pane is expanded at a time (like the Ajax Control Toolkit Accordion). Each AccordionPane has a Header and Content render fragment.

1. Basic Accordion

A simple accordion with three panes. Click a header to expand that pane.

Welcome to the Accordion demo. This pane is expanded by default because SelectedIndex="0".

<Accordion SelectedIndex="0">
    <AccordionPane>
        <Header>Section 1</Header>
        <Content><p>First pane content.</p></Content>
    </AccordionPane>
    <AccordionPane>
        <Header>Section 2</Header>
        <Content><p>Second pane content.</p></Content>
    </AccordionPane>
</Accordion>

2. Styled Headers and Content

Use HeaderCssClass and ContentCssClass to apply custom styling to the accordion panes.

This pane opens by default (SelectedIndex="1").

<Accordion SelectedIndex="1"
           HeaderCssClass="accordion-header-custom"
           ContentCssClass="accordion-content-custom">
    <AccordionPane>
        <Header>Design</Header>
        <Content><p>Styled content.</p></Content>
    </AccordionPane>
</Accordion>

3. Fade Transitions

Enable FadeTransitions for a fade effect instead of the default slide animation. Adjust TransitionDuration for speed.

This accordion uses a 500ms fade transition between panes.

<Accordion SelectedIndex="0" FadeTransitions="true" TransitionDuration="500">
    <AccordionPane>
        <Header>Fade Pane A</Header>
        <Content><p>Uses fade instead of slide.</p></Content>
    </AccordionPane>
</Accordion>

4. Programmatic SelectedIndex

Bind SelectedIndex to a variable and use SelectedIndexChanged to react to pane changes.

Current Pane: 0

Home content. Selected programmatically.

<Accordion SelectedIndex="@currentPaneIndex" SelectedIndexChanged="OnPaneChanged">
    <AccordionPane>
        <Header>Pane 0</Header>
        <Content><p>Home content.</p></Content>
    </AccordionPane>
</Accordion>

@code {
    private int currentPaneIndex = 0;
    private void OnPaneChanged(int index) { currentPaneIndex = index; }
}

5. AutoSize Modes

The AutoSize property controls how the accordion handles its height: None (default), Fill (stretches to container), or Limit (constrains to tallest pane).

This accordion fills its 200px container.

<div style="height: 200px;">
    <Accordion SelectedIndex="0" AutoSize="AutoSizeMode.Fill">
        <AccordionPane>
            <Header>Pane</Header>
            <Content><p>Fills container.</p></Content>
        </AccordionPane>
    </Accordion>
</div>

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:Accordion ID="Accordion1" runat="server"
    SelectedIndex="0" FadeTransitions="true" TransitionDuration="300"
    HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
    <Panes>
        <ajaxToolkit:AccordionPane>
            <Header>Section 1</Header>
            <Content>Content 1</Content>
        </ajaxToolkit:AccordionPane>
    </Panes>
</ajaxToolkit:Accordion>

Blazor with BWFC (After)

<Accordion SelectedIndex="0" FadeTransitions="true" TransitionDuration="300"
           HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
    <AccordionPane>
        <Header>Section 1</Header>
        <Content>Content 1</Content>
    </AccordionPane>
</Accordion>

Migration Steps

  1. Remove asp:ScriptManager (not needed in Blazor)
  2. Replace <ajaxToolkit:Accordion> with <Accordion>
  3. Replace <ajaxToolkit:AccordionPane> with <AccordionPane>
  4. Remove the <Panes> wrapper element — panes are direct children in Blazor
  5. Keep the same property names: SelectedIndex, FadeTransitions, TransitionDuration, etc.
  6. Ensure the page uses @rendermode InteractiveServer