AJAX Accordion Control in ASP.NET
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