ASP.NET的AjaxToolKit提供的这个collapsiblePanel是个非常灵活的可以让你轻松实现为你的web页面的任何一部分添加一个可折叠的按钮。开发人员需要作的，只是指定一个页面上的 Panel 控件为需要折叠展开功能的 Panel 为其TargetID， 同时还可以指定页面上的某一个控件是触发折叠展开功能的开关，或者指定当鼠标移动到某一区域的时候触发这项功能。

其相关属性如下：

TargetControlID 要实现折叠的Panel的ID

CollapsedSize Panel折叠后的尺寸

ExpandedSize Panel伸展后的迟寸

Collapsed 默认加载页面时，此Panel是否处于折叠状态

ExpandControlID 激发伸展效果的控件，主要是通过控件的Click事件实现伸展效果

CollapseControlID 激发折叠效果的控件，主要是通过控件的Click事件实现折叠效果

AutoCollapse 当Panel失去焦点时是否自动折叠

AutoExpand 当Panel失去焦点时是否自动伸展

ScrollContents 是否在Panel内显示滚动条

TextLableID 显示折叠状态的目标控件

CollapsedText 折叠状态时目标控件显示的信息

ExpandedText伸展状态时目标控件显示的信息

ImageControlID 折叠和伸展方式为图片方式时，显示该图像的控件ID

ExpandedImage 伸展时使用的图像路径

CollapsedImage 折叠时使用的图像路径

ExpandDirection Panel伸展方向，伸展方向有水平和垂直两种

下面用一个例子来说明：

<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" />