Set Index of AccordionPane using Javascript

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>

Visit Set Index of AccordionPane using Javascript for live demo and downloadable code.