Bootstrap accordion prevent collapse on postback in asp.net

javascript, jquery, twitter-bootstrap

Solution

Just to post my solution:

Added a hiddenfield:

<asp:HiddenField ID="hfAccordionIndex" runat="server" />

And the JavaScript at the bottom of the page to make sure the DOM has the elements:

<script type="text/javascript">
    $(document).ready(function () {
        var last = $('#<%= hfAccordionIndex.ClientID %>').val();
        if (last != null && last != "") {
            //remove default collapse settings
            $("#applicant-accordion .collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).collapse("show");
        }
    });

    //when a group is shown, save it as the active accordion group
    $("#applicant-accordion").on('shown', function () {
        var active = $("#applicant-accordion .in").attr('id');
        $('#<%= hfAccordionIndex.ClientID %>').val(active);
    });
</script>

Problem

I have a bootstrap accordion where i try to reopen the last opened pane on a postback as in if someone clicks a save button on my page. I found this solution: Retain Twitter Bootstrap Collapse state on Page refresh/Navigation but am unable to comment on it since i don't have enough points as a user. For some reason i can't make the function work: ``` //when a group is shown, save it as the active accordion group $("#applicant-accordion").bind('shown', function () { var active = $("#applicant-accordion .in").attr('id'); $.cookie('activeAccordionGroup', active) }); ``` I'm trying to test it in FireBug but I never get to the line with var active. It stops at the line with $("#applicant-accordion).bind. I've tried changing the .bind to .on since my jQuery is version 1.7.2 I'm at a loss and i hope you can guide me towards a solution. I am building it in ASP.NET. ``` <script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script> <script src="../Scripts/bootstrap/js/bootstrap.js" type="text/javascript" /> <link href="../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js" /> <script type="text/javascript"> $(document).ready(function () { var last = $.cookie('activeAccordionGroup'); if (last != null) { //remove default collapse settings $("#applicant-accordion .panel-collapse").removeClass('in'); //show the account_last visible group $("#" + last).addClass("in"); } }); //when a group is shown, save it as the active accordion group $("#applicant-accordion").on('shown', function () { var active = $("#applicant-accordion .in").attr('id'); $.cookie('activeAccordionGroup', active) }); </script> <div class="accordion" id="applicant-accordion"> <div class="accordion-group"> <div class="accordion-heading"> <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#uInfo">Applicant information</a> </div> <div id="uInfo" class="accordion-body collapse in"> <div class="accordion-inner"> </div> </div> </div> <asp:Panel Visible="false" runat="server" ID="assistancePanel"> <div class="accordion-group"> <div class="accordion-heading"> <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#meetgreet">Accommodation and Meet & Greet information</a> </div> <div id="meetgreet" class="accordion-body collapse"> <div class="accordion-inner"> </div> </div> </div> </asp:Panel> <div class="accordion-group"> <div class="accordion-heading"> <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#application">Application, documents & options</a> </div> <div id="application" class="accordion-body collapse"> <div class="accordion-inner"> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#comments">Comments</a> </div> <div id="comments" class="accordion-body collapse"> <div class="accordion-inner"> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#changelog">Changelog</a> </div> <div id="changelog" class="accordion-body collapse"> <div class="accordion-inner" runat="server" id="changelogItems"> </div> </div> </div> </div> ```

Original source

Related problems