Accordion 是一个可以让你的页面显示多个Panel面板，用户方便地展开或者关闭一系列页面Panel。它有点类似多个 CollapsiblePanels 控件的组合。 但是在同一时间内，只能展开其中的一个Panel， 每一个 Accordion 控件包括若干个 AccordionPane 控件，AccordionPane 控件可以象 Panel 控件一样，用来作为其显示内容的载体。
另外，每一个 AccordionPane 又具有 Header 和 Content 部分，分别用于表示它的标题和其中的内容。
Accordion 控件具有保持其选中状态的功能，当页面发生提交的过程后，Accordion 保留其提交前选中的页面。
|
属性标签名 |
描 述 |
|
SelectedIndex |
该控件初次加载时展开的AccordionPane面板的索引值 |
|
HeaderCssClass |
该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class |
|
ContentCssClass |
该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS Class |
|
AutoSize |
在展开具有不同高度的AccordionPane面板时，该Accordion的总高度的变化方式。可选如下3个值： None：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短 Limit：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短，不过最高不会超过Accordion的Height属性设定值。若是其内容高度超过了Height属性设定值，则将自动显示滚动条 Fill：该Accordion的高度将固定为Height属性的设定值，不随当前展开的不同高度的AccordionPane面板而变化。若是某个AccordionPane的内容高度超过了Height属性设定值，则将自动显示滚动条 |
|
FadeTransitions |
若该属性值设置为true，则在切换当前展开的AccordionPane面板时，将带有淡入淡出效果 |
|
TransitionDuration |
展开/折叠一个AccordionPane面板的过程所花费的时间，单位为毫秒 |
|
FramesPerSecond |
播放展开/折叠AccordionPane面板动画的每秒钟帧数 |
|
DataSourceID |
页面中某个DataSource控件的ID，用于通过数据绑定自动生成AccordionPane面板 |
|
Panes |
该标签内将包含一系列的<ajaxToolkit:AccordionPane>标签，即Accordion- Pane的声明，用来表示Accordion中包含的面板 |
|
HeaderTemplate |
在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的标题区域中的内容模板 |
|
ContentTemplate |
在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的正文区域中的内容模板 |
AutoSize支持以下三种显示和排版方式：
- None - Accordion 在其展开或者折叠过程中，将根据它内部显示的内容自动尺寸的变化，不受到任何的条件限制。 如果将 AutoSize 属性设置为 None 它将可能造成页面上的其它元素跟随 Accordion 的尺寸变化产生向上或者向下的移动。
- Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度（Height）属性之外， 如果将 AutoSize 属性设置为 Limit，可能会造成在某种情况下，它里面的内容需要通过滚动条来滚动。
- Fill - 它将使得 Accordion 控件永远都保持在其高度（Height）属性规定的高度。
Accordion 同样可以象 DataGrid 一样进行数据绑定，它同样可以通过设置 DataSource 属性和 DataSourceID 属性， 并在 HeaderTemplate 和 ContentTemplate 属性中设置其绑定的模板即可将其进行数据绑定。
注意：
在 IE 6 和 IE 7 中 AutoSize 属性的 Limit 和 Fill 将呈现相同的形式，因为他们都不支持 max-height 属性。 如果你将 Accordion 放在一个 Html的表格元素中，并设置 FadeTransitions 为 True 它将造成空白区域的出现。 上面的例子在 IE 6 的浏览器中，如果客户端采用了 1600 x 1200 或者 1280 x 1024 的分辨率将可能会造成它展开或者折叠时候的速度变慢。
代码一：
1.新建Accordion.aspx。
2.双击工具箱中的“ScriptManager”在Accordion.aspx中添加ScriptManager。
3.添加Accordion控件。
Accordion.aspx代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="Accordion" %>
<%@ 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>
<style type="text/css">
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
</div>
<cc1:Accordion ID="Accordion1" runat="server" EnableViewState="false"
FadeTransitions="True" TransitionDuration="200" ContentCssClass="accordionContent" FramesPerSecond="30" AutoSize="None">
<Panes>
<cc1:AccordionPane runat="server">
<Header><a href="" onclick="return false;">Accordion介绍</a></Header>
<Content>
Accordion 是一个可以让你的页面显示多个Panel面板，用户方便地展开或者关闭一系列页面Panel。它有点类似多个 CollapsiblePanels 控件的组合。但是在同一时间内，只能展开其中的一个Panel， 每一个 Accordion 控件包括若干个 AccordionPane 控件，AccordionPane 控件可以象 Panel 控件一样，用来作为其显示内容的载体。
另外，每一个 AccordionPane 又具有 Header 和 Content 部分，分别用于表示它的标题和其中的内容。
Accordion 控件具有保持其选中状态的功能，当页面发生提交的过程后，Accordion 保留其提交前选中的页面。
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane runat="server">
<Header><a href="" onclick="return false;">AutoSize 属性设置</a></Header>
<Content>
AutoSize 属性可以用来控制 Accordion 控件的显示和排版的方式，它支持以下三种方式：<br />
None - Accordion 在其展开或者折叠过程中，将根据它内部显示的内容自动尺寸的变化，不受到任何的条件限制。如果将 AutoSize 属性设置为 None 它将可能造成页面上的其它元素跟随 Accordion 的尺寸变化产生向上或者向下的移动。<br />
Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度（Height）属性之外， 如果将 AutoSize 属性设置为 Limit，可能会造成在某种情况下，它里面的内容需要通过滚动条来滚动。 <br />
Fill - 它将使得 Accordion 控件永远都保持在其高度（Height）属性规定的高度
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane runat="server">
<Header><a href="" onclick="return false;">Accordion 存在的问题</a> </Header>
<Content>
在 IE 6 和 IE 7 中 AutoSize 属性的 Limit 和 Fill 将呈现相同的形式，因为他们都不支持 max-height 属性。如果你将 Accordion 放在一个 Html的表格元素中，并设置 FadeTransitions 为 True 它将造成空白区域的出现。 上面的例子在 IE 6 的浏览器中，如果客户端采用了 1600 x 1200 或者 1280 x 1024 的分辨率将可能会造成它展开或者折叠时候的速度变慢。
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</form>
</body>
</html>
按F5测试运行
代码二：