User Id :    Password :      New Member   Forgot Password
 
AJAX Accordion Control in ASP.NET
Description 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.   No. of Views     3940
  Rating     0
Author Rahul Saxena   Posted On     05 Aug 2011
Tags ASP.NET,Ajax,ASP.NET : How To,General    

Sample Code   Download Code

 

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:

 

<--!
<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>
-->

 

The Running Mode of this is:


 

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

 

 

Finally

 

 

About Author

About Author Rahul shows great interests in working with Microsoft technologies. He specializes in the implementation of DataBase & Graphics. His area of expertise includes: C#, ASP.NET,ADO.NET,Windows Forms & Web Services. He hails from background , Master's in Computer Application. With programming he loves photography, traveling and reading books. Rahul Saxena
No Photo
 
Country India
Company N/A
Home Page N/A

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

     
Write your comment here.  
Comment
Verification Code   
  
    
 
Section sponsored by