CollapsiblePanelExtender Component

The CollapsiblePanelExtender adds collapsible behavior to a target panel, toggling between collapsed and expanded states with smooth CSS transitions. Supports separate collapse/expand triggers and dynamic label text. This emulates the Ajax Control Toolkit CollapsiblePanelExtender.

Note: Extender components render no HTML themselves — they attach JavaScript behavior to an existing target element identified by TargetControlID. This page requires InteractiveServer render mode for JS interop.

1. Basic Collapsible Panel (Toggle)

A single button toggles the panel between expanded and collapsed states. Set both CollapseControlID and ExpandControlID to the same element for toggle behavior.

Panel Content

This panel collapses and expands when you click the toggle button above. Both CollapseControlID and ExpandControlID point to the same button.

  • Item A
  • Item B
  • Item C
<!-- Web Forms (Before) -->
<asp:LinkButton ID="btnToggle" runat="server" Text="Toggle" />
<asp:Panel ID="pnlContent" runat="server">
    <p>Panel content here</p>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe1" runat="server"
    TargetControlID="pnlContent"
    CollapseControlID="btnToggle"
    ExpandControlID="btnToggle" />

<!-- Blazor with BWFC (After) -->
<button id="btnToggle">Toggle</button>
<div id="pnlContent">
    <p>Panel content here</p>
</div>
<CollapsiblePanelExtender TargetControlID="pnlContent"
                          CollapseControlID="btnToggle"
                          ExpandControlID="btnToggle" />

2. Separate Expand/Collapse Controls

Use different elements for expanding and collapsing. One button expands, another collapses.

Separate Controls

This panel uses a dedicated Expand button and a dedicated Collapse button. This pattern is useful when you want clear, labeled actions.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<button id="btnExpand">Expand</button>
<button id="btnCollapse">Collapse</button>
<div id="pnlContent">Content here</div>
<CollapsiblePanelExtender TargetControlID="pnlContent"
                          CollapseControlID="btnCollapse"
                          ExpandControlID="btnExpand" />

3. Dynamic Label Text (CollapsedText / ExpandedText)

A label element automatically updates its text to reflect the panel's state. Use TextLabelID, CollapsedText, and ExpandedText to configure this behavior.

Panel is expanded
Dynamic Label Demo

Watch the label above change as you toggle. The TextLabelID element updates to show CollapsedText or ExpandedText based on current state.

<button id="btnToggle">Toggle</button>
<span id="lblStatus"></span>
<div id="pnlContent">Details here</div>
<CollapsiblePanelExtender TargetControlID="pnlContent"
                          CollapseControlID="btnToggle"
                          ExpandControlID="btnToggle"
                          TextLabelID="lblStatus"
                          CollapsedText="Click to show details"
                          ExpandedText="Click to hide details" />

4. Initially Collapsed Panel

Set Collapsed="true" to start the panel in its collapsed state. The user must click to expand it.

Initially Hidden Content

This panel started collapsed. You had to click the button to see this content. Use Collapsed="true" to achieve this behavior.

This is useful for FAQ sections, advanced options, or optional details.

<button id="btnToggle">Show More</button>
<div id="pnlContent">Hidden content here</div>
<CollapsiblePanelExtender TargetControlID="pnlContent"
                          CollapseControlID="btnToggle"
                          ExpandControlID="btnToggle"
                          Collapsed="true" />

5. Horizontal Expand Direction

Set ExpandDirection="ExpandDirection.Horizontal" to collapse/expand along the horizontal axis instead of vertically. Useful for sidebars or navigation panels.

Sidebar Content
  • Dashboard
  • Reports
  • Settings
  • Help
<button id="btnToggle">Toggle Sidebar</button>
<div id="pnlSidebar" style="width:300px; overflow:hidden;">
    Sidebar content
</div>
<CollapsiblePanelExtender TargetControlID="pnlSidebar"
                          CollapseControlID="btnToggle"
                          ExpandControlID="btnToggle"
                          ExpandDirection="ExpandDirection.Horizontal"
                          ExpandedSize="300" />

6. Auto-Collapse and Auto-Expand

Set AutoCollapse="true" to collapse when the mouse leaves the panel, and AutoExpand="true" to expand when the mouse enters. This creates a hover-driven disclosure pattern.

Hover over the panel below to expand it. Move your mouse away to collapse it.

Hover to expand ▼
Auto-Expand / Auto-Collapse

This panel responds to mouse hover events. It expands when you hover over it and collapses when you move away. You can still use the toggle button for manual control.

<button id="btnToggle">Toggle</button>
<span id="lblStatus"></span>
<div id="pnlContent">Hover-driven content</div>
<CollapsiblePanelExtender TargetControlID="pnlContent"
                          CollapseControlID="btnToggle"
                          ExpandControlID="btnToggle"
                          Collapsed="true"
                          AutoCollapse="true"
                          AutoExpand="true"
                          TextLabelID="lblStatus"
                          CollapsedText="Hover to expand"
                          ExpandedText="Move away to collapse" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:LinkButton ID="lnkToggle" runat="server" Text="Toggle" />
<asp:Label ID="lblStatus" runat="server" />
<asp:Panel ID="pnlContent" runat="server">
    <p>Collapsible content here</p>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
    TargetControlID="pnlContent"
    CollapseControlID="lnkToggle"
    ExpandControlID="lnkToggle"
    Collapsed="true"
    CollapsedText="Show Details"
    ExpandedText="Hide Details"
    TextLabelID="lblStatus"
    ExpandDirection="Vertical"
    AutoCollapse="false"
    AutoExpand="false" />

Blazor with BWFC (After)

<button id="lnkToggle">Toggle</button>
<span id="lblStatus"></span>
<div id="pnlContent">
    <p>Collapsible content here</p>
</div>
<CollapsiblePanelExtender TargetControlID="pnlContent"
                          CollapseControlID="lnkToggle"
                          ExpandControlID="lnkToggle"
                          Collapsed="true"
                          CollapsedText="Show Details"
                          ExpandedText="Hide Details"
                          TextLabelID="lblStatus"
                          ExpandDirection="ExpandDirection.Vertical"
                          AutoCollapse="false"
                          AutoExpand="false" />

Migration Steps

  1. Remove asp:ScriptManager (not needed in Blazor)
  2. Replace <asp:Panel> with a <div> — keep the same id
  3. Replace <asp:LinkButton> or <asp:Button> with standard HTML <button>
  4. Replace <asp:Label> with <span> for the text label element
  5. Replace <ajaxToolkit:CollapsiblePanelExtender> with <CollapsiblePanelExtender>
  6. Prefix ExpandDirection enum values (e.g., Vertical → ExpandDirection.Vertical)
  7. All other properties carry over directly: Collapsed, CollapsedText, ExpandedText, AutoCollapse, AutoExpand
  8. Ensure the page uses @rendermode InteractiveServer (JS interop required)