Introduction
This tutorial will cover the AJAX Accordion Control and how to set it up and use it.  This tutorial will also cover styling the Accordion control with CSS so that it looks presentable.

Step 1. Create an AJAX ready Web Application
1. Start by creating a Web Form Called “Default.aspx”
2. Then we need to add an AJAX Script Manager to the form which will allow it to be AJAX Ready
3. Once that is complete we can add the Accordion Control and see it work

Step 2. Create the Accordion Control
It is important to note how Accordion Controls are setup.  An Accordion Control contains several Accordion Panes, and these Accordion Panes are comprised of Header and Content Sections.  When an Accordion Pane is minimized you will only see the header section and when it is enlarged you can see the Header and the Content sections.Copy the code from below and paste it in your web form, then run it to view the basic Accordion Structure.

If you’re looking for a really good web host, try Server Intellect – we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

Code Block
Ask a Question
Download Source
Default.aspx
  <asp:Accordion ID="Accordion1" runat="server" >
    <Panes>
    <asp:AccordionPane runat="server" ID="Pane1" >
    <Header>Pane 1</Header>  
        <Content>  
        This content goes inside Pane1 so that we can see it when it is extended             
        </Content>
    </asp:AccordionPane>
    <asp:AccordionPane runat="server" ID="AccordionPane1" >
    <Header>Pane 2</Header>  
        <Content>  
        This content goes inside Pane2 so that we can see it when it is extended             
        </Content>
    </asp:AccordionPane>
    <asp:AccordionPane runat="server" ID="AccordionPane2" >
    <Header>Pane 3</Header>  
        <Content>  
        This content goes inside Pane3 so that we can see it when it is extended             
        </Content>
    </asp:AccordionPane>
    </Panes>
    </asp:Accordion>

If you’re looking for a really good web host, try Server Intellect – we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

Step 3. Styling the Accordion Control
The Code below shows a fully styled Accordion Control.  It contains some CSS built into the form that changes the way the Accordion looks(colors, fonts, etc.).  CSS or Cascading Style Sheets is a simpler way of styling HTML Items and splitting the styles into Classes so that they can be applied to any items you wish.
Code Block
Ask a Question
Download Source
Default.aspx
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXAccordion_tut.Default" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 
<!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 Example</title>
     <style type="text/css">  
        .accordion {  
            width: 400px;  
        }  
          
        .accordionHeader {  
            border: 1px solid #2F4F4F;  
            color: white;  
            background-color: #2E4d7B;  
            font-family: Arial, Sans-Serif;  
            font-size: 12px;  
            font-weight: bold;  
            padding: 5px;  
            margin-top: 5px;  
            cursor: pointer;  
        }  
          
        .accordionHeaderSelected {  
            border: 1px solid #2F4F4F;  
            color: white;  
            background-color: #5078B3;  
            font-family: Arial, Sans-Serif;  
            font-size: 12px;  
            font-weight: bold;  
            padding: 5px;  
            margin-top: 5px;  
            cursor: pointer;  
        }  
          
        .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>
    
    </div>
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"  >
    <Panes>
    <asp:AccordionPane runat="server" ID="Pane1" >
    <Header>Pane 1</Header>  
        <Content>  
        This content goes inside Pane1 so that we can see it when it is extended             
        </Content>
    </asp:AccordionPane>
    <asp:AccordionPane runat="server" ID="AccordionPane1" >
    <Header>Pane 2</Header>  
        <Content>  
        This content goes inside Pane2 so that we can see it when it is extended             
        </Content>
    </asp:AccordionPane>
    <asp:AccordionPane runat="server" ID="AccordionPane2" >
    <Header>Pane 3</Header>  
        <Content>  
        This content goes inside Pane3 so that we can see it when it is extended             
        </Content>
    </asp:AccordionPane>
    </Panes>
    </asp:Accordion>
    </form>
</body>
</html>

Conclusion
In this tutorial we showed you how to Use the AJAX Accordion Control in ASP.NET and how to Style it using CSS.  

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we’ve ever dealt with!

AJAXAccordion_tut.zip