Just been playing around with the Accordion control from the toolkit and I was trying to change the selected panel via JavaScript. After a bit of looking around on the ASP.net forums and the VS debugger I managed to do it, so I thought I would share the code with you here.
My server control looks like this:
<ajaxToolkit:Accordion
Height=”600px”
ID=”navigation”
runat=”Server”
SelectedIndex=”0″
HeaderCssClass=”accordionHeader”
ContentCssClass=”accordionContent”
AutoSize=”Fill”
FadeTransitions=”true”
TransitionDuration=”200″
FramesPerSecond=”40″>
.
My javascript is then:
function ChangeIndex()
{
var accHost = $find(‘navigation_AccordionExtender’);
var i = accHost.get_SelectedIndex() + 1;
accHost.set_SelectedIndex(i);
}
Whenever ChangeIndex() is called, it moves the Accordion control to the next panel. Of course needs some error checking to make sure you do not go past the end but you get the idea. Hope it helps.
Excellent code, thankyou for this!
this doesn’t work for me.
I get null!
have any idea why?
thanks.
Don’t know if you still read this, but when I use this, I get “accHost has no properties.”
I guess the control has changed, for example it might not be called ‘navigation_AccordionExtender’.
I no longer use it in the project so really not sure why this is. Sorry. Might want to use something like FireBug and check the name of the Extender…
I figured it out, thanks! It was because of my master pages. I used firebug to find the name of the correct ID.
Hello,
I have used accordian control and some accordian panes on myamaster page.
I want to disable some panes on respective pages. How can i do that when my accordian is on master page? Please help
After some playing around i found a simple way to make sure you select the accordion control correctly. Here is the code
button:
onclick=”ChangeIndex(‘[lessthen]% = Accordion1.ClientID %[morethen]_AccordionExtender’)”
javascript:
function ChangeIndex(controlID)
{
var accHost = $find(controlID);
var i = accHost.get_SelectedIndex() + 1;
accHost.set_SelectedIndex(i);
}
hi
I have created a 4 level nested accordion to create a menu on my webpage. In a javascript i try to drill down to the 2nd accordion that exists in the 1st accordion’s content pane. I use the following code, my problem is that when i run the following code in IE it works fine when i run it on Firefox it displays “accHost.get_Pane(0).content.firstChild.firstChild.id” as undefined. do u have any idea as to why this is happening?
var ac= ‘aSports_AccordionExtender’
var accHost = $find(ac);
alert(‘i=’+ i +’…’+ accHost.get_Pane(0).content.firstChild.firstChild.id + ‘== aBaseBall’);
if (accHost.get_Pane(0).content.firstChild.firstChild.id == ‘aBaseBall’) {
accHost.set_SelectedIndex(0);
var Acc = accHost.get_Pane(0).content.firstChild.firstChild.id;
accHost = $find(Acc + ‘_AccordionExtender’);
}