How to use Accordion in ajax

Accordion and AccordionPane in ajax
Accordion is an ajax toolkit's control. Accordion web control provide multiple panes. only one pane can display at a time in an Accordion control. Accordion is implemented as a web control. an AccordionPane web control represent a pane in accordion. AccordionPane control built with a header template and a content template. developers can track the selected pane so it stays visible across postback.

Accordion control support three auto size modes those are None, Limit and Fill. we can set Accordion auto size mode by setting a value for its AutoSize property. AutoSize mode None allow the Accordion grows or shrink without restriction. with this property Accordion size depends on pane content size. AutoSize mode Limit set a maximum height for Accordion control. in this mode, if the pane content is higher than Accordion Height property then a scrollbar appears in Accordion control. Fill mode stays the Accordion exacts same size as its Height property.

Accordion control can be data bound. we just need to specify Accordion control's DataSource or DataSourceID property. after assigning property value we need to set data items in HeaderTemplate and ContentTemplate property. if we use Accordion DataSource property then we must need to call the DataBind method.

Accordion control also have many useful properties such as SelectedIndex, HeaderCssClass, HeaderSelectedCssClass, ContentCssClass, FadeTransitions, TransitionDuration, FramesPerSecond, RequireOpenedPane, SupressHeaderPostbacks, Panes, HeaderTemplate, ContentTemplate etc.

Accordion SelectedIndex property indicate the AccordionPane that is initially visible.

HeaderCssClass, HeaderSelectedCssClass, ContentCssClass properties are used to change the default look and feel of Accordion and AccordionPane controls.

FadeTransition, TransitionDuration and FramesPerSecond properties allow us to configure Accordion fading transition effect. RequireOpenedPane property ensure that one pane is always open (visible) in Accordion control. SupressHeaderPostbacks property prevent client side click handlers for pane header elements such as a hyperlink in header. Panes property provide a collection of AccordionPane controls in Accordion.

HeaderTemplate contains the markup which is used for a pane's header when databinding and ContentTemplate contains the markup for pane's content when databinding.

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html>

<script runat="server">

<html xmlns="" >
<head id="Head1" runat="server">
    <title>How to use Accordion in ajax</title>
    <style type="text/css">
            border:solid 1px salmon;
    <form id="form1" runat="server">
        <h2 style="color:DarkSeaGreen; font-style:italic;">Ajax Control Toolkit Example: Using Accordion</h2>
        <hr width="450" align="left" color="DarkSeaGreen" />
                <cc1:AccordionPane runat="server" ID="AccordionPane1">
                    <Header>Red Orchid</Header>
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/RedOrchid.jpg" Width="200" />
                <cc1:AccordionPane runat="server" ID="AccordionPane2">
                    <Header>Green Orchid</Header>
                        <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/GreenOrchid.jpg" />
                <cc1:AccordionPane runat="server" ID="AccordionPane3">
                    <Header>Blue Orchid</Header>
                        <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/BlueOrchid.jpg" />
Related ajax examples