ASP.net Ajax Accordion Control – Change Index via Code

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.

 

Technorati tags: ,

8 thoughts on “ASP.net Ajax Accordion Control – Change Index via Code”

  1. 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…

  2. 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

  3. 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);
    }

  4. 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’);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *