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

You could use a hidden input field to persist the active accordion index during postbacks, and then populate it using javascript during the change event of the accordion.

<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" /><script language="javascript" type="text/javascript">    $(function(){        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());        $("#accordion").accordion({            autoHeight:false,            event:"mousedown",            active:activeIndex,            change:function(event, ui)            {                var index = $(this).children('h3').index(ui.newHeader);                $('#<%=hidAccordionIndex.ClientID %>').val(index);            }        });    });</script>

You could probably come up with a more efficient way of capturing the active index during the change event, but this seems to work.

When the page has loaded it retrieves the active index from the hidden field and stores it in a variable. It then initialises the accordion using the retrieved index and a custom function to fire on the change event which writes a new index to the hidden field whenever a new pane is activated.

During a postback, the hidden field value is persisted in the ViewState so that when the page is loaded again the accordion is initialised with the index of the last pane clicked on.

MaxCarey's solution seems to work well, but the latest version of jQuery UI (1.10.4) seems to have some differences. The correct event is not "changed" now, but "activate" (or "beforeActivate", if you want the option to cancel the event).

<asp:HiddenField runat="server" ID="hidAccordionIndex" Value="0" />...$(document).ready(function () {    var activeIndex = parseInt($("#<%=hidAccordionIndex.ClientID %>").val());    $("#accordion").accordion({        heightStyle: "content",        active: activeIndex,        activate: function (event, ui) {            var index = $(this).children('h3').index(ui.newHeader);            $("#<%=hidAccordionIndex.ClientID %>").val(index);        }    });});

The gotcha for me here is that I can verify that the hidAccordionIndex value is being set to the proper value, but on postback, it's getting set back to 0 no matter what I try. I've tried setting it to an empty string, like Dave.Lebr1 suggested, but it still isn't persisting on postback.

This should remain available on postback, since my divAccordionIndex field should have ViewState (I've verified it's enabled).

Has anyone else had success with this? This menu is in my master page, and it works great...other than this.

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//positonprivate 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();    }});