AjaxControlToolkit 微软出的ajax.net 工具使用教程四 CollapsiblePanelExtender（隐藏）控件的使用 （游陆原创）
新建一个AjaxControlToolkitWebSite 项目，把下面的代码复制到你的页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" _fcksavedurl=""StyleSheet.css"" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server">
</asp:ScriptManager>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
TargetControlID="ContentPanel"
ExpandControlID="TitlePanel"
CollapseControlID="TitlePanel"
Collapsed="True"
TextLabelID="Label1"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="Image1"
ExpandedImage="~/images/collapse_blue.jpg"
CollapsedImage="~/images/expand_blue.jpg"
SuppressPostBack="true">
</ajaxToolkit:CollapsiblePanelExtender>
<asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg"/>
Who am I ?
<asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
</asp:Panel>
<asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">
<h1>
<br />
Just your average MS Joe ...</h1>
If you would like to contact me you can send email from my blog at either
of the following web sites.<p>
<a href="http://www.JoeOn.net">http://www.JoeOn.net</a></p>
<p>
<a href="http://blogs.msdn.com/JoeStagner">http://blogs.msdn.com/JoeStagner</a></p>
<p>
I'm a Program Manager on the Microsoft web Tools and Platform.
</p>
<p>
While my team is based in Redmond WA, I live in New England USA with my beautiful
wife and children and work wherever the job takes me. I joined Microsoft in 2001
after starting, building, and selling a .COM firm in New York City. I began as a
strategic advisor to independent software venders (ISV), moved to a position as
a Developer Technology Expert ad Technical Evangelist, and after three years I moved
to the web Tools and Platform Team.</p>
<p>
<img align="right" border="0" height="150" src="images/JoeStagUK.gif" width="150" /></p>
<h2>
What do I do at Microsoft ?</h2>
<p>
You would think this should be an easy question, but it's actually not.
</p>
<p>
My job has many parts.
</p>
<p>
To communicate with Microsoft's web Development Customers, to know as much as I
can about all web development technologies, those made by Microsoft and those made
by everyone else, and to communicate from the world to the web development product
teams and from the web development product teams to the development community.
</p>
</asp:Panel>
</form>
</body>
</html>
样式文件代码：
.collapsePanel {
width: 640px;
height:0px;
background-color:white;
overflow:hidden;
}
.collapsePanelHeader{
width:640px;
height:20px;
color: Yellow;
background-color: Black;
font-weight:bold;
float:left;
padding:5px;
cursor: pointer;
vertical-align: middle;
}
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
.accordionLink
{
background-color: #D3DEEF;
color: white:
}
.watermark {
background: #FFAAFF;
}
.popupControl {
background-color:#AAD4FF;
position:absolute;
visibility:hidden;
border-style:solid;
border-color: Black;
border-width: 2px;
}
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
.sampleStyleA {
background-color:#FFF;
}
.sampleStyleB {
background-color:#FFF;
font-family:monospace;
font-size:10pt;
font-weight:bold;
}
.sampleStyleC {
background-color:#ddffdd;
font-family:sans-serif;
font-size:10pt;
font-style:italic;
}
.sampleStyleD {
background-color:Blue;
color:White;
font-family:Arial;
font-size:10pt;
}