Question

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.

Answer 1

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

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