title: To keep the opened collapsible panel open after an AJAX refresh
body: <p>I have a main page which has a partial view. The partial view is refreshed every 60 seconds and I use AJAX to load the partial view. The code for the main page and the scripts and styles are as below.</p>
  
  <pre><code>@{
  ViewBag.Title = "Home Page";
  }
  @model SampleApp1.Models.Model1
  
  &lt;style&gt;
  .panel-heading .accordion-toggle:after {
  /* symbol for "opening" panels */
  font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
  content: "\e114";    /* adjust as needed, taken from bootstrap.css */
  float: right;        /* adjust as needed */
  color: grey;         /* adjust as needed */
  }
  .panel-heading .accordion-toggle.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\e113";    /* adjust as needed, taken from bootstrap.css */
  }
  
  &lt;/style&gt;
  
  &lt;div id="MainPage"&gt;
  @Html.Partial("_PartialPage1")
  &lt;/div&gt;
  
  
  &lt;script&gt;
  window.setInterval(function () {
      loadView();
  }, 60000
      );
  
  function loadView() {
  headerArray=$('#accordion').find('[aria-expanded=true]').closest('a');
  bodyArray=$('#accordion').find($('.in'));
      var targetUrl = '/Home/GetIndex';
      $.ajax({
          url: targetUrl,
          type: 'GET',
          cache: true,
          async: true,
      }).done(function (partialViewResult) {
          $("#MainPage").html(partialViewResult);
  jQuery.each(headerArray, function (index, item) {
      $(this).removeClass('collapsed');
      $(this).attr('aria-expanded=true');
      console.log($(this))
  });
  jQuery.each(bodyArray, function (index, item) {
      $(this).addClass('in');
      $(this).attr('aria-expanded=true');
      console.log($(this))
  });
  
      });
  }
  </code></pre>
  
  <p></p>
  
  <p>The partial view is basically a set of tabs developed using collapsible panels. I am trying to store the panels that are open and then load it as open after the screen refresh.</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h4 class="panel-title"&gt;
              &lt;a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseOne"&gt;
                 @Model.Header1
              &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseOne" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
              @Model.Tab1
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h4 class="panel-title"&gt;
              &lt;a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseTwo"&gt;
                  @Model.Header2
  
              &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
              @Model.Tab2
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h4 class="panel-title"&gt;
              &lt;a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseThree"&gt;
                  @Model.Header3
  
              &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
              @Model.Tab3
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My script does not seem to work and all panels are collapsed after refresh. Am i missing something? Is there another way of doing it?</p>
  
  <p>EDIT: Adding the code inside the AJAX portion did not help. When I debug from the console the tabs are open until the loadView function and when the control goes back to 60,000 it seems to collapse.</p>
  
  <p><a href="https://stackoverflow.com/q/30070366/4761773">This question</a> is pretty similar to my question, this was also not resolved.</p>