title: Bootstrap Accordion. Retain state on pageload for multiple panels
body: <p>I am using bootstrap accordion on form page. The user can open multiple panels at the same time. After the form is submitted, I would like to retain the state of any of the Bootstrap accordion panels that were open. </p>
  
  <p>I have modified some code I found on stack overflow to do this using local storage, as below:</p>
  
  <pre><code>Accordion HTML
  -------------------
  
  &lt;div class="panel-group" id="accordion"&gt;
  
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;div class="panel-title"&gt; &lt;a data-toggle="collapse" href="#client_12325"&gt;Panel heading&lt;/a&gt; &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="client_12325" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;Panel Content&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;div class="panel-title"&gt; &lt;a data-toggle="collapse" href="#client_12326"&gt;Panel heading&lt;/a&gt; &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="client_12326" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;Panel Content&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
   &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;div class="panel-title"&gt; &lt;a data-toggle="collapse" href="#client_12327"&gt;Panel heading&lt;/a&gt; &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="client_12327" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;Panel Content&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  Javascript
  ---------------
  
  &lt;script&gt;
  $(document).ready(function() {
  
      var retainState = [];
      localStorage.setItem('retainState', JSON.stringify(retainState));
  
      $('#accordion').on('shown.bs.collapse', '.panel-collapse', function() {
          retainState = JSON.parse(localStorage.getItem('retainState'));
          if ($.inArray($(this).attr('id'), retainState) == -1) {
              retainState.push($(this).attr('id'));
          };
          localStorage.setItem('retainState', JSON.stringify(retainState));
      });
  
      $('#accordion').on('hidden.bs.collapse', '.panel-collapse', function() {
          retainState = JSON.parse(localStorage.getItem('retainState'));
          retainState.splice( $.inArray($(this).attr('id'), retainState), 1  ); //remove item from array
          localStorage.setItem('retainState', JSON.stringify(retainState));
      });
  
  });
  
  
  var retainStateArray = JSON.parse(localStorage.getItem('retainState'));
  var arrayLength = retainStateArray.length;
  for (var i = 0; i &lt; arrayLength; i++) {
      var panel = '#'+retainStateArray[i];
      $(panel).addClass('in');
      console.log(panel);
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>There are 2 issues with this code</p>
  
  <p>1/ It gets the correct ID's of the panels on page refresh (you can see via the console log within the loop), however it fails to add the class 'in' to the panels. </p>
  
  <p>2/ It only retains the state for the first page reload. I would like it to retain the state for the entire user session no matter how many times the page is reloaded. </p>
  
  <p>Thanks in advance.</p>