Accordion控件一般用在内容比较多的页面上，功能类似于TAB选项卡，将一组功能相似任务相同的内容放在不同的选项卡下。然后通过选项卡的Header实现各组内容查看。
属性列表： SelectedIndex：已伸展开的AccordionPane控件的索引号。 HeaderCssClass：作用于标题的CSS类名。它也可以指定给Accordion 控件的HeaderCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的HeaderCssClass属性。 ContentCssClass：用于显示内容的CSS类名。它也可以指定给Accordion 控件的ContentCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的ContentCssClass属性。 AutoSize: 设计控件中Panel的显示方式，主要有3种，即None（无限制的拉伸和收缩）,Limit（限制内容的高度）,Fill（内容高度与控件本身高度一样）。 FadeTransitions：为True时为渐变效果（在伸缩时颜色变淡，伸缩完后颜色恢复正常）,为false时是标准变换。 TransitionDuration：在选择某一标题后伸展和收缩过渡动画所持续的时间,单位为毫秒。 FramesPerSecond：用于伸展和收缩过渡动画每秒所需要的帧数。 AutoSize：用于限制Accordion控件展开的高度. AutoSize枚举类型取值在简介中已作过描述。 Panes：AccordionPane控件的集合。 HeaderTemplate：标题模版，其中包含的标记用于进行数据绑定来显示面版标题。 ContentTemplate：内容模版，其中包含的标记用于进行数据绑来显示面版内容。 DataSource：指定数据源，必须要调用DataBind()方法进行数据绑定。 DataSourceID：用数据源的ID来指定一个数据源。 DataMember：当使用DataSourceID 来指定数据源时用于绑定的成员。
实例解析一、实现静态导航菜单的实例（并页面无刷新）核心技术：界面无刷新OnItemCommand="Accordion1_ItemCommand"
1.前台UI<head runat="server"> <title>无标题页</title> <style> .header { background-color:gray; height:25px; widht:205px; border-right:#99ccff thin solid; border-top:#9ccff thin solid; border-left:#9ccff thin solid; border-botton:#9ccff thin solid; } .content { background-color:#ccccff; height:30px; width:205px; } </style></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lab" runat="server" Text=""></asp:Label> <cc1:Accordion ID="Accordion1" runat="server" ContentCssClass="content" HeaderCssClass="header" AutoSize="None" Width="300px" Height="150px" OnItemCommand="Accordion1_ItemCommand"> <Panes> <cc1:AccordionPane ID="AccordionPane1" runat="server"> <Header><a href="">属性介绍一</a></Header> <Content> HeaderCssClass：作用于标题的CSS类名。它也可以指定给Accordion 控件的HeaderCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的HeaderCssClass属性。 </Content> </cc1:AccordionPane> </Panes> <Panes> <cc1:AccordionPane ID="AccordionPane2" runat="server"> <Header><a href="">属性介绍二</a></Header> <Content> DataMember：当使用DataSourceID 来指定数据源时用于绑定的成员。<br /> <asp:LinkButton ID="LinkButton1" runat="server" CommandName="link" CommandArgument="单击外部获得此数据">单击外部获得此数据</asp:LinkButton> </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> </ContentTemplate> </asp:UpdatePanel> </form></body>
2.后台 protected void Accordion1_ItemCommand(object sender, CommandEventArgs e) { lab.Text = e.CommandArgument.ToString(); }
实例解析二、实现动态导航菜单的实例（并页面无刷新）核心技术：界面无刷新OnItemCommand="Accordion1_ItemCommand"SqlDataSource<form id="form1" runat="server">
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lab" runat="server" Text=""></asp:Label> <cc1:Accordion ID="Accordion1" runat="server" ContentCssClass="content" HeaderCssClass="header" AutoSize="None" Width="300px" Height="150px" OnItemCommand="Accordion1_ItemCommand" DataSourceID="SqlDataSource1"> <HeaderTemplate> <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Bind("UserName")%>'></asp:LinkButton> </HeaderTemplate> <ContentTemplate> <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Bind("UserAddress")%>'></asp:LinkButton> </ContentTemplate> </cc1:Accordion> </ContentTemplate> </asp:UpdatePanel> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:db_04ConnectionString %>" SelectCommand="SELECT [UserName], [UserAddress], [UserID] FROM [tb_Employee]"></asp:SqlDataSource> </form>实例解析二、动态添加导航菜单项的实例核心技术： AccordionPane pane = new AccordionPane(); .... pane.HeaderContainer.Controls.Add(LinkButton..); pane.ContentContainer.Controls.Add(...); .... Accordion1.Panes.Add(pane);