Using Accordion With AJAX

Accordion: In a Graphical User Interface (GUI) an "Accordion" is like the musical instrument called an "Accordion". The Accordion was made by Akkordion in 19th century and it looks like:



In the same way, in a GUI an Accordion is a vertically stacked list of items (for example labels or thumbnails). Each item can be "expanded" or "stretched" to reveal the content associated with that item. There can be zero or more items expanded at a time, depending on the configuration.

In the "Accordion", several buttons or labels are stacked upon one another. At most, one of them can be "active". When a button is active, the space below the button is used to display a "Panes Window". The pane is usually constrained by the width of labels.

Purpose

The purpose of an Accordion is:

• Groups windows together that ought to have some relation with each other.
• One window is available at a time to the reduce information "overload"; only one window is "opened".

Now for our topic "How to use An Accordion Using Ajax Toolkit". So first of all if you want to make an Accordion in Ajax then you need the Ajax toolkit. You can download it from http://www.mediafire.com/download/k7zacicqhudwldf/AjaxToolKit4.1.rar and add it with Visual Studio Toolbox (use this link for the help http://www.youtube.com/watch?v=24IgoIc0Ons).

How to use Accordion in ASP.NET website

The following procedure describes how to create a sample use of an Accordion in an ASP.NET website:

1. Open Visual Studio 2010 and Go to "File" -> "New" -> "Website".
2. Go to Installed Templates and select "Visual C#" then select "ASP.NET Empty Website".
   
   
   
   
3. Now in the next step go to Solution Explorer and select "Add New Item" ->"WebForm" inside the website folder.
   
   
   

To add the Ajax Accordion you need to do the procedure shown in the following figure.

1. Add a Toolkit Script Manager: Drag the "ToolkitScriptManager" from the Visual Studio Toolbox window onto the page.

   <asp:ToolkitScriptManagerID="Toolkitscriptmanager1"runat="server"></asp:ToolkitScriptManager>
    

2. Add an Accordion: Drag the "Accordion" from the Visual Studio Toolbox.

   <asp:AccordionID="Accordion1"runat="server"></asp:Accordion>
    

3. Add Accordion Panes: To add an "Accordion Pane" you need to use a "Panes" tag ( for example, "<Panes>"..."</Panes>") inside the Accordion tag and just drag and drop the "AccordionPane" inside the Panes tag.
   
   Now write the code for the header of the accordion inside the "Header" tag ( for example, "<Header>".............."</Header>") and the content of the accordion inside the "Content" tag ( for example, "<Content>"............."</Content>")
   
   The simple code is as follows:
   
   <asp:AccordionID="Accordion1"runat="server">  
           <Panes>
                 <asp:AccordionPanerunat="server">
                       <Header>First Header</Header>
                         <Content>
                              This is first Accordion Pane...... :)
                         </Content>
                       </asp:AccordionPane> 
                 <asp:AccordionPaneID="AccordionPane1"runat="server">
                      <Header>Second Header</Header>
                         <Content>
                              This is Second Accordion Pane...... :)
                         </Content>
                 </asp:AccordionPane> 
                 <asp:AccordionPaneID="AccordionPane2"runat="server">
                      <Header>Third Header</Header>
                         <Content>
                              This is Third Accordion Pane...... :)
                         </Content>
                 </asp:AccordionPane> 
          </Panes>  
   </asp:Accordion>
   
   After writing this code you will get output (press F5) like this:
   
   
    
4. Add Accordion Style Using CSS: After running the code, as you can see the output is not looking good. To make the Accordion stylish we need to use Casecading Style Sheet (CSS) styles.
   
   Inside the Head Tag define styles as in the following:
   
   <styletype="text/css">
           .accordion {
               width:400px;
           } 
           .accordionHeader {
               border:1pxsolid#2F4F4F;
               color:white;
               background-color:gray;
               font-family:Arial,Sans-Serif;
               font-size:12px;
               font-weight:bold;
               padding:5px;
               margin-top:5px;
               cursor:pointer;
           } 
           .accordionHeaderSelected {
               border:1pxsolid#2F4F4F;
               color:white;
               background-color:black;
               font-family:Arial,Sans-Serif;
               font-size:12px;
               font-weight:bold;
               padding:5px;
               margin-top:5px;
               cursor:pointer;
           } 
           .accordionContent {
               background-color:Red;
               border:1pxdashed#2F4F4F;
               border-top:none;
               padding:5px;
               padding-top:10px;
           }
       </style>
   
   And inside the Accordion tag ( for example, <asp:Accordion ID="Accordion1" runat="server">) just define a "CSS Selector".
   
   By using the following code you can define "CSS Selector".
   
   <asp:Accordion ID="Accordion1" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
     ContentCssClass="accordionContent" runat="server">

After all that, the output (press F5) will be like: