Open Accordion on click using javascript

In this example I'm going to show how to open an AjaxToolkit Accordion control using Javascript.

Let us have this following scenario. Lets have an Asp RadioButtonList who is going to have the declaration of the onClick event and call our javascript function.

<asp:RadioButtonList ID="rbl_Obj" runat="server" RepeatDirection="Horizontal" onclick="OpenAccordion(this)">

<asp:ListItem Value="1">Open Accordion<\asp:ListItem>

<asp:ListItem Value="0">Close Accordion<\asp:ListItem>

<\asp:RadioButtonList>

And here is our AjaxToolkit Accordion declaration:

<ajaxToolkit:Accordion ID="ajax_Accordion" runat="server" AutoSize="None" FadeTransitions="True"

RequireOpenedPane="false" SelectedIndex="-1" SuppressHeaderPostbacks="true" Visible="True">

Now, here is the Javascript function receiving just one parameter. In this case we are sending the ASP RadioButtonList object itself.

function OpenAccordion(objRadioButtonList) {

try {

var objAccordion = $get('<%ajax_Accordion.ClientID%>');

if (isChecked(objRadioButtonList)) {

/*--- For the toolkit version 1.0 use the following line ---*/

objHTML.AccordionBehavior.set_SelectedIndex(0); // 0 is the accordion pane index to be display.

/*--- For the toolkit version 3.0 use the following line instead ---*/

objHTML.set_SelectedIndex(0); // 0 is the accordion pane index to be display.

else {

/*--- For the toolkit version 1.0 use the following line ---*/

objAccordion.AccordionBehavior.set_SelectedIndex(-1); // Close opened pane

/*--- For the toolkit version 3.0 use the following line instead ---*/

objAccordion.set_SelectedIndex(-1); // Close opened pane.

}

objAccordion = null;

}

catch (ex) {

alert("Error: " + ex.description);

}

}

The method set_SelectedIndex needs to be invoke thru the property AccordionBehavior if your are still using the toolkit version 1.0 and .NET Framework 2.0.

Browser compatibility tested: IE 6 SP2, IE 7, IE 8, Safari 4, Chrome, Opera 9.6, Firefox 3.0

Thanks.