CollapsiblePanelExtender這個控制項的效果，在很多網頁都看的到，
就是點個bar，區塊可以隱藏跟顯 示，以避免網頁上存在著過多detail資訊，或過大的圖把頁面撐高。
(感覺就像是 我又跳出來啦～～我又縮回去啦～～打我啊笨蛋…)
另外一個跟CollapsiblePanelExtender很像的Extender，叫做Accordion，沒記錯的 話好像翻譯成「手風琴」，就是可以有好幾折的。
差異在哪，CollapsiblePanelExtender是針對單一區塊，
而Accordion是多個區塊group起來，一次只能打開一個區塊，開第二個展開時，先前已經展開的就會折起來。
CollapsiblePanelExtender使用上其實很簡單，
這邊舉的例子，首先用兩個panel，搭配一個 CollapsiblePanelExtender就可以搞定了，
想漂亮點在套點CSS。
Source Code：CollapsiblePanelExtender_Sample.rar
aspx如下：
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.collapsePanel {
background-color:white;
overflow:hidden;
}
.collapsePanelHeader
{
background-position: #666;
width: 100%;
height: 30px;
background: #C0C0C0;
color: #CC6699;
font-weight: bold;
}
</style>
<title>CollapsiblePanelExtender</title>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="collapsePanelHeader" Width="80%">
<asp:Image ID="Image1" runat="server" ImageUrl="~/image/exp.gif" />
<asp:Label ID="Label1" runat="server">展開圖片</asp:Label>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<asp:Image ID="Image2" runat="server" ImageUrl="~/image/IMG_0084.JPG" />
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="Panel1"
ExpandControlID="Panel1" TargetControlID="Panel2" ImageControlID="Image1"
TextLabelID="Label1" CollapsedText="顯示圖片" ExpandedText="隱藏圖片" ExpandedImage="~/image/col.gif"
CollapsedImage="~/image/exp.gif" Collapsed="true">
</cc1:CollapsiblePanelExtender>
0. 基本原則 首引是防家溝通的第一步 因此好的首引(約定) 有助於之後的整體防禦計畫 <br />
我們社團裡最通用的首引是 01 第四 這裡的教學就是介紹這種首引的方式<br />
注: ﹝上﹞篇介紹只是 "單門牌張組合" 情況下應引哪一張牌 整副牌的首引和各引牌意義將放在﹝下﹞篇
</div>
</form>
</body>
</html>
可以看 到，Panel1是用來決定縮放Panel2的物件，(jQuery其實應該更容易寫)
Panel2則是要隱藏跟展開的區塊。
CollapsiblePanelExtender屬性說明：
- CollapseControlID：用來點的區塊，點一下就會隱藏
- ExpandControlID：用來點的區塊，點一下就會展開
- TargetControlID：要隱藏/展開的區塊
- CollapsedText：隱藏panel2時的字
- ExpandedText：展開panel2時的字
- TextLabelID：要呈現CollapsedText與ExpandedText的Label
- CollapsedImage： 隱藏panel2時的圖
- ExpandedImage：展開Panel2 時的圖
- ImageControlID：要呈現CollapsedImage與ExpandedImage的Image
- Collapsed：一開始要隱藏還是要展開的boolean
畫面：
一 開始隱藏的圖：
展開後的圖：
