Technical Blog: Accordion Control Example

It allows you to define multiple panes but displays only one pane at a time. It is a king of CollapsiblePanel Control. To define multiple panes in Accordion Control , we have to make use of “AccordionPane” Control. Each pane has its own template for its header and content.

Important attributes of this control are :

SelectedIndex : needs to specify Index of the pane that should be visible by default. (mandatory attribute for Accordion Control)

CssClass : specify a css class name that represents style for accordion control.

HeaderCssClass : specify a css class name that represents style for headers of AccordionPane Control.

ContentCssClass : specify a css class name that represents style for contents of AccordionPane Control

Example – Accordion Control

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion Control.aspx.cs" 
Inherits="Ajax_Controls_Examples_Accordion_Control" %>

<!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>Accordion Control</title>
    <style type="text/css">
.accordion
{
    padding: 5px;
    font-family: 'Times New Roman' , Times, serif;
    font-size: medium;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    color: #000000;
    background-color: #FFFFFF;
    position: absolute;
    width: 200px;
    height: 173px;
            top: 40px;
            left: 10px;
        }

.accordionheader
{
    font-family: 'Times New Roman' , Times, serif;
    font-size: large;
    font-weight: bold;
    font-style: normal;
    color: #000000;
    border: thin dotted #000000;
    padding: inherit;
    background-color: #CC6600;
    width: 200px;
    height: 30px;
}
.accordionContent
{
    font-family: 'Times New Roman' , Times, serif;
    font-size: small;
    font-weight: bold;
    font-style: italic;
    color: #800000;
    background-color: #FFFFCC;
     width: 200px;
}


</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <ajaxToolkit:Accordion id="Accordion1" runat="server" SelectedIndex="0"
             HeaderCssClass="accordionheader" ContentCssClass="accordionContent" 
             CssClass="accordion">
        <Panes>
        <ajaxToolkit:AccordionPane ID="Pane1" runat="server">
        <Header>
            <asp:Label ID="lblHd1" runat="server" Text="Accordion Control"></asp:Label>
            
        </Header>
        <Content>
            It allows you to define multiple panes
            but displays only one pane at a time.
            It is a king of CollapsiblePanel Control.
            To define multiple panes in Accordion Control
            , we have to make use of “AccordionPane” Control.
             Each pane has its own template for its header and content.
        </Content>
        </ajaxToolkit:AccordionPane>
        
        <ajaxToolkit:AccordionPane id="pane2" runat="server">
            <Header>
                <asp:Label ID="Label1" runat="server" Text="Accordion Pane"></asp:Label>
            </Header>
            <Content>
             It allows you to define multiple panes
            but displays only one pane at a time.
            It is a king of CollapsiblePanel Control.
            To define multiple panes in Accordion Control
            , we have to make use of “AccordionPane” Control.
             Each pane has its own template for its header and content.
            </Content>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="Pane3" runat="server">
            <Header>
              <asp:Label ID="Label3" runat="server" Text="Header Styles"></asp:Label>
            </Header>
            <Content>
            It allows you to define multiple panes
            but displays only one pane at a time.
            It is a king of CollapsiblePanel Control.
            To define multiple panes in Accordion Control
            , we have to make use of “AccordionPane” Control.
             Each pane has its own template for its header and content.
            </Content>
            
        </ajaxToolkit:AccordionPane>
        </Panes>           
        </ajaxToolkit:Accordion>
    </div>
    </form>
</body>
</html>