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