Keep the current jQuery accordion pane open after ASP.NET postback?

Viewed 33971

I have a jquery accordion on an asp.net aspx weppage. Inside the panes, I have asp.net buttons. When I click on the button, the pane I was in, closes and reloads the page, defaulting to the first pane. I don't mind the reload, but is there a way to keep the current pane open after the reload. Right now, I am just calling accordion() on a div with the id of accordion.

13 Answers

write index or id of accordion pane in which the button was pressed using ClientScript.RegisterStartupScript. Suppose user clicks button named btnSubmit which is in pane 3. Then it will work like this:

protected void btnSubmitClick(object sender, EventArgs e)
{
    //process button click

    //class this function at end:
    SetAccordionPane(3);
}

//you can call this function every time you need to set specific pane to open
//positon
private void SetAccordionPane(int idx)
{
    var s="<script type=\"text/javascript\">var paneIndex = "
      + idx +"</script">; 
    ClientScript.RegisterStartupScript(typeof(<YourPageClass>, s);
}

now in javascript:

$(function(){

    if(paneIndex)
    {
        $('.selector').accordion({active: paneIndex});
    }
    else
    {
        $('.selector').accordion();
    }
});

Use the option "active" when you create the accordion. Something like this:

$('.selector').accordion({ active: 2 });

This will activate the second option in the accordion. You can also pass a selector to select by id.

Related