title: Bootstrap collapse cookies not working
body: <p>Everytime I clicked on the "collapse" button, it worked but after its refreshed, it doesn't save its state. For example when I collapse a panel and refresh the page, then the panel is left open.</p>
  
  <p>P.S the {$forum['fid']} represents a forum number, which is automatically generated through templates</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="panel panel-default" id="forum"&gt;
    &lt;div class="panel-heading"&gt;&lt;h3 class="panel-title"&gt;&lt;a href="{$forum_url}"&gt;{$forum['name']}&lt;/a&gt;&lt;/h3&gt;&lt;span class="pull-right"&gt;&lt;a href="#forumlist{$forum['fid']}" data-parent="forum" data-toggle="collapse"&gt;Toggle&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div id="forumlist{$forum['fid']}"  class="panel-collapse collapse in"&gt;
    &lt;div class="panel-body panel-default"&gt; 
  &lt;div class="panel panel-default" style="margin-bottom: 0px;border:1px solid #2b2b2b;"&gt;
  &lt;table class="table table-hover"&gt;
      &lt;tbody&gt;
  {$sub_forums}
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
    &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>   $(document).ready(function () {
          //when a group is shown, save it as the active accordion group
          $("#forum").on('shown.bs.collapse', function () {
              var active = $("#forum .in").attr('id');
              $.cookie('activeForumGroup', active);
            //  alert(active);
          });
          $("#forum").on('hidden.bs.collapse', function () {
              $.removeCookie('activeForumGroup');
          });
          var last = $.cookie('activeForumGroup');
          if (last != null) {
              //remove default collapse settings
              $("#forum .panel-collapse").removeClass('in');
              //show the account_last visible group
              $("#" + last).addClass("in");
          }
      });
  </code></pre>