Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

AJAX Accordion Control

Article:
Viewed:  5850 
Posted On:  19/07/2012 10:30:02 
The Accordion is a web control that allows us to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. 

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

ACCORDION4.jpg

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us