title: Bootstrap accordion prevent collapse on postback in asp.net
body: <p>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: <a href="https://stackoverflow.com/questions/12733238/bootstrap-collapse-accordion-return-to-same-section-when-navigating-away-and-ba">Retain Twitter Bootstrap Collapse state on Page refresh/Navigation</a></p>
  
  <p>but am unable to comment on it since i don't have enough points as a user.</p>
  
  <p>For some reason i can't make the function work:</p>
  
  <pre><code>//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)
  });
  </code></pre>
  
  <p>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</p>
  
  <p>I'm at a loss and i hope you can guide me towards a solution. I am building it in ASP.NET.</p>
  
  <pre><code>&lt;script src="../Scripts/jquery-1.7.2.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../Scripts/bootstrap/js/bootstrap.js" type="text/javascript" /&gt;
  &lt;link href="../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js" /&gt;
  
  &lt;script type="text/javascript"&gt;
      $(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)
      });
  
  &lt;/script&gt;
  
      &lt;div class="accordion" id="applicant-accordion"&gt;
          &lt;div class="accordion-group"&gt;
              &lt;div class="accordion-heading"&gt;
                  &lt;a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#uInfo"&gt;Applicant information&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="uInfo" class="accordion-body collapse in"&gt;
                  &lt;div class="accordion-inner"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;asp:Panel Visible="false" runat="server" ID="assistancePanel"&gt;
              &lt;div class="accordion-group"&gt;
                  &lt;div class="accordion-heading"&gt;
                      &lt;a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#meetgreet"&gt;Accommodation and Meet &amp; Greet information&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="meetgreet" class="accordion-body collapse"&gt;
                      &lt;div class="accordion-inner"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/asp:Panel&gt;
  
          &lt;div class="accordion-group"&gt;
              &lt;div class="accordion-heading"&gt;
                  &lt;a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#application"&gt;Application, documents &amp; options&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="application" class="accordion-body collapse"&gt;
                  &lt;div class="accordion-inner"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="accordion-group"&gt;
              &lt;div class="accordion-heading"&gt;
                  &lt;a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#comments"&gt;Comments&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="comments" class="accordion-body collapse"&gt;
                  &lt;div class="accordion-inner"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="accordion-group"&gt;
              &lt;div class="accordion-heading"&gt;
                  &lt;a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#changelog"&gt;Changelog&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="changelog" class="accordion-body collapse"&gt;
                  &lt;div class="accordion-inner" runat="server" id="changelogItems"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>