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.
· TargetControlID - the Panel to operate expands and collapse.
· CollapsedSize - The size of the target, in pixels, when it is in the collapsed state.
· ExpandedSize - The size of the target, in pixels, when it is in the opened state.
· Collapsed - Specifies that the object should initially be collapsed or expanded.
· AutoCollapse - True to automatically collapse when the mouse is moved off the panel.
· AutoExpand - True to automatically expand when the mouse is moved over the panel.
· 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.
· TextLabelID - The ID of a label control where the "status text" for the panel will be placed. The panel will replace the internal HTML of this control .
· CollapsedText - The text to show in the control specified by TextLabelID when the panel is collapsed. This text is also used as the alternate text of the image if ImageControlID is set.
· ExpandedText - The text to show in the control specified by TextLabelID when the panel is opened. This text is also used as the alternate text of the image if ImageControlID is set.
· ImageControlID - The ID of an Image control where an icon indicating the collapsed status of the panel will be placed. The extender will replace the source of this Image with the CollapsedImage and Expanded Image urls as appropriate.
· CollapsedImage - The path to an image used by ImageControlID when the panel is collapsed
· Expanded Image - The path to an image used by ImageControlID when the panel is expanded
· ExpandDirection - can be "Vertical" or "Horizontal" to determine whether the panel expands top-to-bottom or left-to-right.
<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control--%>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<%-- use the CollapsiblePanelExtender and we set the all properties given here and also use some standerd control here--%>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel1" CollapseControlID="pHeader" ExpandControlID="pHeader" TextLabelID="lblText" CollapsedText="Subscribe free ebook ExpandedText="Subscribe free ebook"CollapsedSize="0" ScrollContents="True" SuppressPostBack="True" ExpandedImage="~/expand_button.png" CollapsedImage="~/collapse_button.png" ImageControlID="Image1">
<asp:Panel ID="pHeader" runat="server" BackColor="#99CCFF">
<asp:Label ID="lblText" runat="server" />
<asp:Image ID="Image1" runat="server" ImageUrl="~/collapse_button.png"/>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Enter yor email to subscribe free ebook"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" />
Here CollapseControlID="pHeader" and ExpandControlID="pHeader" collapse and expand the Panel1 which is defined in the code as TargetControlID="Panel1"
Run the project
When you click Subscribe free ebook or collapse image then Panel1 will expand