使用注意：
1,Accordion和Panes,AccordionPane配合使用
2,AccordionPane放在Panes里
先介绍一下属性：
Accordion的属性：
CssClass：Accordion的样式
SelectedIndex：要展开的面板的索引号。如果设为-1的话，那会收缩所有的面板。
HeaderCssClass：标题的样式表名称。
ContentCssClass：内容的样式表名称。
FadeTransitions：是否出现淡入淡出效果。true-淡入淡出;false-无。
TrasitionDuration：淡入淡出效果的时间长度。默认250毫秒。
FramesPerScond：淡入淡出时每秒种的帧数。默认30帧。
RequireOpenedPane：是否有一个可折叠面板处理展开状态。
HeaderTemplate：数据绑定时，必须使用这个属性来设定标题模板。
ContentTemplate：数据绑定时，必须使用这个属性来设定内容模板。
DataSource：指定数据源。
DataSourceID：所欲使用的数据源的ID属性。
DataMemeber：欲绑定的数据成员。
AutoSize：自动调整大小的模式(None,Limit,Fill)。
网页代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="qq.aspx.cs" Inherits="web_qq" %>
<%@ 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">
<title>无标题页</title>
<link rel="Stylesheet" href="qq.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" CssClass="sidebar" HeaderCssClass="header" ContentCssClass="content" runat="server" FramesPerSecond="15" FadeTransitions="true" TransitionDuration="500" Width="220" SelectedIndex="0">
<Panes>
<cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected" ID="AccordionPane1" runat="server">
<Header>标题：爱上你是一个错</Header>
<Content>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
</Content>
</cc1:AccordionPane >
<cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected" ID="AccordionPane2" runat="server">
<Header>标题：爱上你是一个错</Header>
<Content>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
</Content>
</cc1:AccordionPane >
<cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected" ID="AccordionPane3" runat="server">
<Header>标题：爱上你是一个错</Header>
<Content>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
</Content>
</cc1:AccordionPane >
<cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected" ID="AccordionPane4" runat="server">
<Header>标题：爱上你是一个错</Header>
<Content>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
</Content>
</cc1:AccordionPane >
</Panes>
</cc1:Accordion>
</div>
</form>
</body>
</html>
<%@ 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">
<title>无标题页</title>
<link rel="Stylesheet" href="qq.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" CssClass="sidebar" HeaderCssClass="header" ContentCssClass="content" runat="server" FramesPerSecond="15" FadeTransitions="true" TransitionDuration="500" Width="220" SelectedIndex="0">
<Panes>
<cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected" ID="AccordionPane1" runat="server">
<Header>标题：爱上你是一个错</Header>
<Content>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
</Content>
</cc1:AccordionPane >
<cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected" ID="AccordionPane2" runat="server">
<Header>标题：爱上你是一个错</Header>
<Content>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
</Content>
</cc1:AccordionPane >
<cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected" ID="AccordionPane3" runat="server">
<Header>标题：爱上你是一个错</Header>
<Content>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
</Content>
</cc1:AccordionPane >
<cc1:AccordionPane HeaderSelectedCssClass="accordionHeaderSelected" ID="AccordionPane4" runat="server">
<Header>标题：爱上你是一个错</Header>
<Content>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
爱上你是一个错<br>
</Content>
</cc1:AccordionPane >
</Panes>
</cc1:Accordion>
</div>
</form>
</body>
</html>
样式表
body
{
background-color:#efefef;
font-size:12px;
margin-bottom:0px;
margin-top:0px;
line-height:18px;
}
#form1
{
margin:0px auto;
}
.sidebar
{
background-color:#FFF;
}
.sidebar .header
{
font-weight:bold;
background-color:#2e4d7b;
line-height:25px;
color:#FFF;
padding-left:8PX;
padding-right:8PX;
cursor:pointer;
border:1px solid #000;
margin-top:5px;
}
.sidebar .accordionHeaderSelected
{
font-weight:bold;
background-color:#000;
line-height:25px;
color:#FFF;
padding-left:8PX;
padding-right:8PX;
cursor:pointer;
border:1px solid #000;
margin-top:5px;
}
.sidebar .content
{
padding-left:8px;
padding-right:8px;
border:dashed 1px #000;
}
{
background-color:#efefef;
font-size:12px;
margin-bottom:0px;
margin-top:0px;
line-height:18px;
}
#form1
{
margin:0px auto;
}
.sidebar
{
background-color:#FFF;
}
.sidebar .header
{
font-weight:bold;
background-color:#2e4d7b;
line-height:25px;
color:#FFF;
padding-left:8PX;
padding-right:8PX;
cursor:pointer;
border:1px solid #000;
margin-top:5px;
}
.sidebar .accordionHeaderSelected
{
font-weight:bold;
background-color:#000;
line-height:25px;
color:#FFF;
padding-left:8PX;
padding-right:8PX;
cursor:pointer;
border:1px solid #000;
margin-top:5px;
}
.sidebar .content
{
padding-left:8px;
padding-right:8px;
border:dashed 1px #000;
}