Keeping the current accordion pane open after ASP.NET postback

I have problem with keeping the active according open after the post-back of ASP.NET page.

Here's the script:

$(document).ready(function() {

    $('.accordionButton').click(function() {

        //Remove the "accordionOn" calss from all button
        $('.accordionButton').removeClass('accordionOn');

        //Close all open divs
        $('.accordionContent').slideUp('normal');

        //Open the div
        if ($(this).next().is(':hidden') == true) {

        //Add the "accordionOn" class to the button
            $(this).addClass('accordionOn');

            //Open div
            $(this).next().slideDown('normal');
        }

    });

});

Here's the mark-up:

<div id="accordionWrapper">
        <div class="accordionButton">
            Hearder 1</div>
        <div class="accordionContent">
            Content 1
            <asp:Label ID="lblName" runat="server"></asp:Label>
            <br />
            <asp:Button ID="btnSayHello" runat="server" Text="Say Hello" />
        </div>
       <div class="accordionButton">
        Hearder 2</div>
    <div class="accordionContent">
        Content 2
    </div>    
       <div class=开发者_开发技巧"accordionButton">
        Hearder 3</div>
    <div class="accordionContent">
        Content 3
    </div>      

</div>

I'd like to persist the active accordion, the current open div, to stay open during the post-back of ASP.NET.

Thank you.

Post back index of selected pane, and restore on page load as

$('.accordionButton').eq(index).click()

You could save the accordion position in a cookie and then retrieve it with on page load and set it with something like:

   $('.accordionButton').eq(index).click()

Look here on how to set/get a value in a cookie in javascript

You should save the selected pane, and select it with javascript on page load:

$(document).ready(function(){
  $('.accordionButton').eq(<%= SelectedPane %>).click()
});

Or, you could youse hashes in you url as facebook does, but it'd be more complicated.

Hope this helps. Cheers

The index value can be boolean or integer

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


</script>

Remember to start with index less than 0

    <asp:HiddenField ID="AccordionIndexHidden" runat="server" Value="-1" />