Accordion控件是能够提供多个显示面版的Web控件，它一次只能显示一个面版的内容。它有多个可折叠的面版，且一次只能展开一个。Accordion内包含AccordionPane控件，每个AccordionPane控件内都有一个模版，模版内都有标题和内容。
Accordion控件有三种AutoSize模式能适应各种不同的布局：
None：在Accordion控件展开或收缩时不受限制，这会引起其他元素在页面中向上或向下移动。
Limit：在Accordion控件展开时不能超过控件的最开始设置的高度，如果显示内容太多则会出现滚动条。
Fill：Accordion控件始终精确保持和高度设置一样的尺寸。
Accordion控件也能够进行数据绑定，通过DataSource或 DataSourceID属性指定一个数据源，然后设置标题数据字段（HeaderTemplate）和内容数据字段（ContentTemplate）。
二、Accordion控件属性介绍
控件初始化代码格式如下(斜体部分的属性为可选项)：
<atlasToolkit:Accordion
ID="MyAccordion"
runat="Server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40">
<Panes>
<atlasToolkit:AccordionPane
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent">
<Header> . . . </Header>
<Content> . . . </Content>
</atlasToolkit:AccordionPane>
.
.
.
</Panes>
<HeaderTemplate>...</HeaderTemplate>
<ContentTemplate>...</ContentTemplate>
</atlasToolkit:Accordion>
控件的每个属性介绍如下：
SelectedIndex：已伸展开的AccordionPane控件的索引号。
HeaderCssClass：作用于标题的CSS类名。它也可以指定给Accordion 控件的HeaderCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的HeaderCssClass属性。
ContentCssClass：用于显示内容的CSS类名。它也可以指定给Accordion 控件的ContentCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的ContentCssClass属性。
FadeTransitions：为True时为渐变效果（在伸缩时颜色变淡，伸缩完后颜色恢复正常）,为false时是标准变换。
TransitionDuration：在选择某一标题后伸展和收缩过渡动画所持续的时间,单位为毫秒。
FramesPerSecond：用于伸展和收缩过渡动画每秒所需要的帧数。
AutoSize：用于限制Accordion控件展开的高度. AutoSize枚举类型取值在简介中已作过描述。
Panes：AccordionPane控件的集合。
HeaderTemplate：标题模版，其中包含的标记用于进行数据绑定来显示面版标题。
ContentTemplate：内容模版，其中包含的标记用于进行数据绑来显示面版内容。
DataSource：指定数据源，必须要调用DataBind()方法进行数据绑定。
DataSourceID：用数据源的ID来指定一个数据源。
DataMember：当使用DataSourceID 来指定数据源时用于绑定的成员。
三、实例演示
1．我们先把AtlasControlToolkit.dll的控件安装到开发环境工具箱中：
图1
2．添加一个页面Accordion.aspx，在页面上放一个ScriptManager控件（必须要有）和一个Accordion控件和多个AccordionPane控件。在AccordionPane模版中设置<Content></Content>和<Header></Header>的内容，代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" 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 href="StyleSheet.css" type=text/css rel=stylesheet>
<script src="Accordion.js" type="text/jscript"></script>
</head>
<body >
<form >
注：此控件非常有用，系统的左侧菜单问题就这么解决了。