Blazor ExpansionPanel Overview

Updated on Jul 1, 2026

The Telerik ExpansionPanel component for Blazor facilitates the display of content in expandable containers that users can expand or collapse to show or hide information, options, or additional details. The component consists of:

• A header that includes a title, a subtitle, and an indicator icon that shows the state of the panel.
• A content area that shows and hides with an animation.

Comparison with PanelBar

The ExpansionPanel and PanelBar are similar and interchangeable in some aspects. The major differences between the two components are:

• The PanelBar is a databound component. The ExpansionPanel and its content are defined declaratively.
• When using a hierarchy of parent and child items, the PanelBar uses different styling for the children, while the nested ExpansionPanel instances look like their parent.
• The PanelBar provides built-in selection and navigation, while the ExpansionPanel does not.
• The ExpansionPanel is more convenient to use in scenarios where multiple instances one below the other show very different content that cannot be generalized in a single PanelBar ContentTemplate.

Creating Blazor ExpansionPanel

1. Add a <TelerikExpansionPanel> tag to your Razor file.
2. Set the Expanded parameter to a boolean value. If users will be able to toggle the component, use two-way binding or the ExpansionPanel ExpandedChanged event.
3. Set the Title parameter.
4. (optional) Set the SubTitle parameter to a label that will appear next to the expand/collapse arrow.
5. (optional) If you need to programmatically expand or collapse the ExpansionPanel, use the component methods. Updating the Expanded parameter also works, but without animations.

Basic Blazor ExpasionPanel

<TelerikExpansionPanel @bind-Expanded="@ExpansionPanelExpanded"
                       SubTitle="Sub Title"
                       Title="Expansion Panel Title">
    <Content>
        Expansion Panel Content
    </Content>
</TelerikExpansionPanel>

@code {
    private bool ExpansionPanelExpanded { get; set; }
}

Icons

The ExpansionPanel uses ChevronDown and ChevronUp icons in the header to communicate its current state and hint the users that they can expand and collapse the component. You can customize the icons with the ExpansionPanel CollapseIcon and ExpandIcon parameters.

Using custom ExpasionPanel icons

<TelerikExpansionPanel CollapseIcon="@SvgIcon.ArrowUp"
                       ExpandIcon="@SvgIcon.ArrowDown"
                       @bind-Expanded="@ExpansionPanelExpanded"
                       Title="Expansion Panel Title">
    <Content>
        ExpansionPanel Content
    </Content>
</TelerikExpansionPanel>

@code {
    private bool ExpansionPanelExpanded { get; set; }
}

User Interaction

The ExpansionPanel provides two parameters that affect the users' ability to interact with the component:

• Toggleable—If set to false, users are not be able to expand and collapse the component. The app can always toggle the ExpansionPanel through the component methods.
• Enabled—Similar to Toggleable, but when false, the component applies additional styling to hint users that it's disabled.

Both parameters depend on the component configuration. Users have no built-in way to control them, unless the app provides a custom UI.

Using the ExpansionPanel Enabled and Toggleable parameters

RAZOR

<TelerikExpansionPanel Enabled="@ExpansionPanelEnabled"
                       Toggleable="@ExpansionPanelToggleable" />

@code {
    private bool ExpansionPanelEnabled { get; set; } = true;
    private bool ExpansionPanelToggleable { get; set; } = true;
}

Templates

The ExpansionPanel templates allow you to customize the component rendering. For example, you can use rich content and child components instead of the default plain text title and subtitle.

Events

The ExpansionPanel exposes events that enable the app to detect and react to user actions.

ExpansionPanel API

Consult the ExpansionPanel API Reference to see all available component parameters, methods, and events.

Use @ref to add a reference to the component instance and use the ExpansionPanel methods. The earliest possible time to use Blazor component references is in OnAfterRender or OnAfterRenderAsync.

The ExpansionPanel methods ExpandAsync, CollapseAsync, and ToggleAsync provide the following benefits:

• The app can expand and collapse the ExpansionPanel programmatically even if the Toggleable parameter is set to false.
• When using the methods, the ExpansionPanel changes its state with an animation. When only updating the Expanded parameter value, there is no animation.

Using ExpansionPanel methods

<TelerikButton OnClick="@OnExpandButtonClick">Expand</TelerikButton>
<TelerikButton OnClick="@OnCollapseButtonClick">Collapse</TelerikButton>
<TelerikButton OnClick="@OnToggleButtonClick">Toggle</TelerikButton>

<TelerikExpansionPanel @ref="ExpansionPanelRef"
                       @bind-Expanded="@ExpansionPanelExpanded"
                       Title="Expansion Panel Title"
                       Toggleable="false">
    <Content>
        Expansion Panel Content
    </Content>
</TelerikExpansionPanel>

@code {
    private TelerikExpansionPanel? ExpansionPanelRef;

    private bool ExpansionPanelExpanded { get; set; }

    private async Task OnExpandButtonClick()
    {
        await ExpansionPanelRef!.ExpandAsync();
    }

    private async Task OnCollapseButtonClick()
    {
        await ExpansionPanelRef!.CollapseAsync();
    }

    private async Task OnToggleButtonClick()
    {
        await ExpansionPanelRef!.ToggleAsync();
    }
}

Next Steps

• Use ExpansionPanel Templates
• Handle ExpansionPanel Events

See Also

• ExpansionPanel Live Demos
• ExpansionPanel API Reference
• Hide empty space between expanded adjacent ExpansionPanels