The CollapsiblePanel extender control of AJAX control toolkit provides the functionality of expand/collapse behavior of targeted Panel control of ASP.Net.
CollapsiblePanel extender requires two Panel control IDs, One Panel control operates the open/close function and other Panel control performs the open/close behavior. You can place Label Control inside the first Panel control and associate it with CollapsiblePanel extender to display the current action of Panel control.

You can specify the expand size for the second panel having content that will perform the expand/collapse behavior. If the panel contains large size of content that clips out due to the fixed expand size then you can enable scrolling for content overflow.

CollapsiblePanel extender also retains the open or close state of extender. If CollapsiblePanel is in expanded state then after postback operation it remains open that shows that it maintains the state of extender by communicating with server end.

There is one more property of CollapsiblePanel that makes it interactive. You can specify the paths of images for both states of CollapsiblePanel i.e. Expand Image path and Collapse Image Path.

CollapsiblePanel Extender Properties

CollapseControlID: ID of the Panel Control that will perform the collapse action.

ExpandControlID: ID of the Panel Control that will perform the expand action.
You can set the same ID for both CollapseControlID and ExpandControlID so that expand/collapse action should be performed by the single Panel Control.

TargetControlID: ID of the Panel control that will operate the expand/collapse actions.

TextLabelID: ID of the Label control that will display the current status of the extender.

CollapsedText: Text to display the status of Panel when it is in the collapsed state. This text is displayed in Label control associated in the TextLabelID property.

ExpandedText: Text to display the status of Panel when it is in expanded mode.

Collapsed: If true then initializes the CollapsiblePanel with collapsed state.

ExpandDirection: You can specify the direction for the Panel whether it expands/collapse in vertical direction or horizontal direction.

CollapsedSize: Initial size of the Panel that will perform the expand/collapse action when it is in collapsed mode.

ExpandedSize: Initial size of the Panel that will perform the expand/collapse action when it is in expanded mode.

ScrollContents: If the expand size specified is less than the size of content inside the expand/collapse Panel then you can set this property true to allow scrolling.

AutoExpand/AutoCollapse: To allow the functionality of auto expand and collapse on mouse over event.

ImageControlID: ID of the image control that will display the image related to the status of CollapsiblePanel extender.

CollapsedImage: Path of the image to be displayed when the extender is in collapsed mode.

ExpandedImage: Path of the image to be displayed when the CollapsiblePanel is in expanded mode.

Sample Code for CollapsiblePanel Control Extender

CSS code:

HTML code: