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

Question

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,

Answer 1

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.

Answer 2

        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());       

        $("#accordion,#inneraccordian").accordion({
            heightStyle: "content",
            collapsible: true,
            navigation: true,
            active: activeIndex,
            beforeActivate: function (event, ui) {
                var index = $(this).children('h3').index(ui.newHeader);
                $('#<%=hidAccordionIndex.ClientID %>').val(index);
            }
        });

Answer 3

I know this is late, but it still may help someone struggling with this. The solution here is basically a combination of some of the above wisdom. ;-)

I am using jquery-ui-1.10.4.custom.min.js and jquery-1.6.3.min.js.

 <%--the hidden field saves the active tab during a postback--%>
        <asp:HiddenField ID="hdLastActive" runat="server" Value="0" />
    </div>
</form>

and here is the javaScript:

<script type="text/javascript">
$(document).ready(function () {
    // get the last active tab index -or 0 on initial pagee load- to activate the tab
    var activeTab = parseInt($("[id$='hdLastActive']").val());

    // initialize the accordion to the activeTab and set the activate event to save the last active tab index.
    $("#accordion").accordion({
        active: activeTab,
        activate: function (e) {
            // save the active tab index in the hidden field
            $("[id$='hdLastActive']").val($(this).accordion("option", "active"));                
        }
    });
});

Answer 4

$("#accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    navigation: true
});

Setting the navigation property to true will retain the state of the accordion panel.

Answer 5

Put your button or gridview which may has to clicked or updated in a Update panel. Then ui accordion will works fine 100% + guarantee.. Sarath@f1

Answer 6

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.