How to Use CollapsiblePanel

CollapsiblePanel is a customizable panel control with the following attributes: TargetControlID
ID of the Panel to be folded

CollapsedSize
Size after Panel folding

ExpandedSize
Late size after Panel stretch

Collapsed
Whether the Panel is collapsed when the page is loaded by default

ExpandControlID
Controls that stimulate the stretching effect, mainly through the Click Event of the control to achieve the stretching Effect

CollapseControlID
Controls that stimulate the folding effect mainly implement the folding effect through the Click Event of the control.

AutoCollapse
Whether to collapse automatically when the Panel loses focus

AutoExpand
Whether to automatically stretch when the Panel loses focus

ScrollContents
Whether to display the scroll bar in the Panel

TextLableID
Target control that displays the folding status

CollapsedText
Information displayed by the target control during the folding status

ExpandedText
Display Information of the target control during Stretching

ImageControlID
The widget ID of the image is displayed when the folding and stretching modes are image modes.

ExpandedImage
Image path used for stretching

CollapsedImage
Image path used for folding

ExpandDirection
Panel stretch direction: horizontal and vertical
 

Demo:

 

<AjaxToolkit: CollapsiblePanelExtender ID = "cpe" runat = "Server"
TargetControlID = "Panel1"
CollapsedSize = "0"
ExpandedSize = "300"
Collapsed = "True"
ExpandControlID = "LinkButton1"
CollapseControlID = "LinkButton1"
AutoCollapse = "False"
AutoExpand = "False"
ScrollContents = "True"
TextLabelID = "Label1"
CollapsedText = "Show Details ..."
ExpandedText = "Hide Details"
ImageControlID = "Image1"
ExpandedImage = "~ /Images/collapse.jpg"
CollapsedImage = "~ /Images/expand.jpg"
ExpandDirection = "Vertical"/>