How to create a simple Ajax Collapsible Panel Extender in asp.net

The collapsiblePanel is used to collapse and expand any web page content or controls inside asp.net panel control. Panel control will expand and collapse by using label control or linkbutton control. For clean collapse and expand use Label Control to target collapse and expand panel control.

Properties of CollapsiblePanelExtender

TargetControlID – the Panel to operate expand and collapse. Use Panel control as TargetControlID

Collapsed – It specifies that the object should initially be collapsed or expanded.

AutoCollapse – when it is property is True to automatically collapse when the mouse is moved off the panel. It is better to keep false for clean collapse

AutoExpand – when it is property is True to automatically expand when the mouse is moved over the panel. It is better to keep false for clean collapse

ScrollContents – True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents.

ExpandControlID/CollapseControlID – The controls that will expand or collapse the panel on a click, respectively. If these values are the same, the panel will automatically toggle its state on each click. ExpandControlID or CollapseControl ID use label control

CollapsedImage – It views the image assigned by image path of the ImageControlID when the panel is Collapsed

ExpandedImage – It views the image assigned by image path of the ImageControlID when the panel is expanded

ExpandDirection – It can be “Vertical” or “Horizontal” to determine whether the panel expands or collapse top-to-bottom or left-to-right.

Step by step process to create a simple ajax collapsible panel extender

Step1: Drag Script Manager from Toolbox Ajax Extensions first then drag Label control its id is lblRegister

<asp:Label ID="lblRegister" runat="server" Font-Names="Verdana" 
Font-Size="9pt" Text="Register"></asp:Label>

Step2: Drag Panel control inside panel control Design Register form with TextBoxs and button control.

<asp:Panel ID="PnlRegister" runat="server" BackColor="#999999? 
Font-Names="Verdana" Font-Size="9pt" Width="300px">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Email</td>
<td><asp:TextBox ID="txtEmailID? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><asp:Button ID="btnRegister? runat="server" Text="Register" /></td>
</tr>
</table>
</asp:Panel>

Step3: Drag CollapsiblePanelExtender from Ajax control toolkit

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1? runat="server">
</cc1:CollapsiblePanelExtender>
Explanation: The collapsiblePanelExtender will take action when 
user click Label (lblRegister) control then the register panel 
will collapse and to  expand also click label (lblRegister)
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1? 
runat="server"
CollapseControlID="lblRegister"
ExpandControlID="lblRegister"
TargetControlID="PnlRegister"
Collapsed="True" >
</cc1:CollapsiblePanelExtender>

Remember: Target controls ID must be always Panel control. For Expand and Collapse ID is Label or LinkButton control

Complete code for CollapsiblePanelExtender Example

<asp:ScriptManager ID="ScriptManager1? runat="server"> </asp:ScriptManager>
<div style="width: 300px">
<asp:Label ID="lblRegister" runat="server" Font-Names="Verdana" Font-Size="9pt"
Text="Register" BackColor="#FFCC66?></asp:Label>
<br />
<asp:Panel ID="PnlRegister" runat="server" BackColor="#999999? 
Font-Names="Verdana" Font-Size="9pt" Width="300px">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>EmailID</td>
<td><asp:TextBox ID="txtEmail? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><asp:Button ID="btnRegister? runat="server" Text="Register" /></td>
</tr>
</table>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1? runat="server"
CollapseControlID="lblRegister"
ExpandControlID="lblRegister"
TargetControlID="PnlRegister"
Collapsed="True" >
</cc1:CollapsiblePanelExtender>
<br />
</div>

Step4: Now Run the application you will observe Register (label control) by clicking this control User Registration form(Panel control) will collaspe to expand click same label control(Register).

To Remove ajax collapsiblepanel flicker

keep properties of

AutoCollapse = false
AutoExpand = false

in CollapsiblePanelExtender