Friday, May 28, 2010

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.

1 comment:

digital signatures said...

Set Index of AccordionPane using Javascript is an important feature that is demanded in many requirements.The code you provided is complete in itself to serve the purpose.Thanks for sharing such a useful and informative blog

Site Meter