title: Saving multiple panel's collapsed state using cookies with $.cookie()
body: <p>I'm trying to determine how I might save a collapsible panel's collapsed state using $.cookie. </p>
  
  <p><a href="https://stackoverflow.com/questions/12733238/retain-twitter-bootstrap-collapse-state-on-page-refresh-navigation">This</a> question has been helpful so far, but still missing the end solution.</p>
  
  <p>Any solutions I have found so far have only saved the last rolled down panel so when the page is reloaded the only panel saved is the last one. </p>
  
  <p>What I need is to save all panels that are rolled down rather than just one.</p>
  
  <p><a href="https://github.com/carhartl/jquery-cookie" rel="noreferrer">Link</a> to jCookie plugin on Github.</p>
  
  <p><a href="http://jsfiddle.net/a7gg70fv/" rel="noreferrer">Link</a> to demo on JSFiddle</p>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>It has been suggested that LocalStorage is a more appropriate solution to what I am trying to achieve. If you can comment on why and what local storage is that would be much appreciated. </p>
  
  <hr>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>because of the suggestion that local storage would be an improvement over using cookies for this problem. The selected answer was based off this. However as mentioned by Robin, there are downsides to using this technique on HTTPS sites. </p>
  
  <hr>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
      &lt;div data-toggle="collapse" data-target="#panel1" class="panel-heading collapsed"&gt;
          &lt;h4 class="panel-title"&gt;
              &lt;a&gt; Panel 1 &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="panel1" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="panel panel-default"&gt;
      &lt;div data-toggle="collapse" data-target="#panel2" class="panel-heading collapsed"&gt;
          &lt;h4 class="panel-title"&gt;
              &lt;a&gt; Panel 2 &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="panel2" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="panel panel-default"&gt;
      &lt;div data-toggle="collapse" data-target="#panel3" class="panel-heading collapsed"&gt;
          &lt;h4 class="panel-title"&gt;
              &lt;a&gt; Panel 3 &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="panel3" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQUERY</strong></p>
  
  <pre><code>$(".panel .panel-collapse").on('shown.bs.collapse', function ()
  {
      var active = $(this).attr('id');
      $.cookie('activePanelGroup', active);
  });
  
  $(".panel .panel-collapse").on('hidden.bs.collapse', function ()
  {
      $.removeCookie('activePanelGroup');
  });
  
  var last = $.cookie('activePanelGroup');
  if (last != null)
  {
      //remove default collapse settings
      $(".panel .panel-collapse").removeClass('in');
      //show the account_last visible group
      $("#" + last).addClass("in");
  }
  </code></pre>