Bootstrap崩溃Cookie无法正常工作

Question

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.

PS the {$forum['fid']} represents a forum number, which is automatically generated through templates

HTML

<div class="panel panel-default" id="forum">
  <div class="panel-heading"><h3 class="panel-title"><a href="{$forum_url}">{$forum['name']}</a></h3><span class="pull-right"><a href="#forumlist{$forum['fid']}" data-parent="forum" data-toggle="collapse">Toggle</a></span></div>
  <div id="forumlist{$forum['fid']}"  class="panel-collapse collapse in">
  <div class="panel-body panel-default"> 
<div class="panel panel-default" style="margin-bottom: 0px;border:1px solid #2b2b2b;">
<table class="table table-hover">
    <tbody>
{$sub_forums}
    </tbody>
</table>
</div>
  </div>
    </div>
</div>

JS

   $(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");
        }
    });

Answer 1

This may be missing

<div class="panel-group" id="forum">
<div class="panel panel-default">

changing the ID of each other