In this article, I will explain how to set index of Accordion pane using javascript. Step 1: Create an Accordion control with three panes
<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true"> <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header>Accordion Set Index Demo1</Header> <Content>First Accordion Pane</Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header>Accordion Set Index Demo2</Header> <Content>Second Accordion Pane</Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server"> <Header>Accordion Set Index Demo3</Header> <Content>Third Accordion Pane</Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion>
Step 2: Create three buttons to set index of each accordion pane. Each button will call SetIndex javascript method.
<asp:Button ID="btnTest" OnClientClick="return SetIndex(0)" runat="server" Text="Set Index1" /> <asp:Button ID="btnTest1" OnClientClick="return SetIndex(1)" runat="server" Text="Set Index2" /> <asp:Button ID="btnTest2" OnClientClick="return SetIndex(2)" runat="server" Text="Set Index3" />
Step 3: Create SetIndex javascript method which sets the index of Accordion Pane based on the index number passed to SetIndex method.
< script language="javascript" type="text/javascript">function SetIndex(index) { var acc = $get('<%=MyAccordion.ClientID%>'); if (acc != null) { var accBehave = acc.AccordionBehavior; accBehave.set_SelectedIndex(index); } return false; } </ script> Live Demo
|