AJAX Accordion Control

An accordion menu is a collection of multiple, stacked panels. Only one of them is visible and another can be opened by clicking the header of a closed one using a smooth transition of the heights of the content area of the panels. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.

The Aspx Code for Accordion is:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
    <title>AJAX CONTROL: Accordion Pane Show</title>
    <link href="MyStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<
body>
    <form id="form1" runat="server">
        <table cellpadding="0" cellspacing="0" width="50%" align="center">
            <tr>
                <td>
                    <ajaxtoolkit:toolkitscriptmanager id="ScriptManager1" runat="server" />
                    <div>
                        <ajaxtoolkit:accordion id="Accordion1" runat="server" fadetransitions="True" selectedindex="0"
                            transitionduration="300" headercssclass="accordionHeader"
contentcssclass="accordionContent">
                            <Panes>
                                <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                                    <Header>
                                        AJAX FIRST PANE</Header>
                                    <Content>
                                        AJAX FIRST PANE AJAX FIRST PANE AJAX FIRST PANE AJAX FIRST PANE
                                   
</Content>
                                </ajaxToolkit:AccordionPane>
                                <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                                    <Header>
                                        AJAX SECOND PANE
                                   
</Header>
                                    <Content>
                                        AJAX SECOND PANE AJAX SECOND PANE AJAX SECOND PANE AJAX SECOND PANE
                                   
</Content>
                                </ajaxToolkit:AccordionPane>
                                <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                                    <Header>
                                        AJAX THIRD PANE
                                   
</Header>
                                    <Content>
                                        AJAX THIRD PANE AJAX THIRD PANE AJAX THIRD PANE AJAX THIRD PANE
                                   
</Content>
                                </ajaxToolkit:AccordionPane>
                                <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">
                                    <Header>
                                        AJAX FOURTH PANE
                                   
</Header>
                                    <Content>
                                        AJAX FOURTH PANE AJAX FOURTH PANE AJAX FOURTH PANE AJAX FOURTH PANE
                                   
</Content>
                                </ajaxToolkit:AccordionPane>
                            </Panes>
                        </ajaxtoolkit:accordion>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</
html>

The Running Mode of this is:


ACCORDION1.JPG

When I click on Second Menu then second pane will visible while first become hide.

ACCORDION2.jpg

Finally

ACCORDION3.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all