Bootstrapのアコーディオンパネル(collapse)でページ遷移の際に開いた状態を維持する

Bootstrap3でのアコーディオンパネル（今回は.list-groupを使用）を作成したのですけど、

http://getbootstrap.com/javascript/#collapse-example-accordion

ページ遷移が起こった際に、パネルが閉じた状態になる。これを開いたままにしたい。特にパネルを複数用意した場合に便利かと。

調べてみると「Cookie使え」みたいな記事が出てくるので、js-cookieというものを使います。

HTML

これはほぼ公式サイトのまま。前述したように.panel-bodyの代わりに.list-groupを使用する。

<div id="accordion" class="panel panel-group" role="tablist">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
      <h4 class="panel-title">
        <a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseListGroup1" aria-expanded="true" aria-controls="collapseListGroup1"> Collapsible list group #1</a>
      </h4>
    </div>
    <div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1" aria-expanded="true">
      <ul class="list-group">
        <li class="list-group-item">Bootply</li>
        <li class="list-group-item">One itmus ac facilin</li>
        <li class="list-group-item">Second eros</li>
      </ul>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="collapseListGroupHeading2">
      <h4 class="panel-title">
        <a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseListGroup2" aria-expanded="true" aria-controls="collapseListGroup2"> Collapsible list group #2</a>
      </h4>
    </div>
    <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2" aria-expanded="true">
      <ul class="list-group">
        <li class="list-group-item">Bootply</li>
        <li class="list-group-item">One itmus ac facilin</li>
        <li class="list-group-item">Second eros</li>
      </ul>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="collapseListGroupHeading3">
      <h4 class="panel-title">
        <a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseListGroup3" aria-expanded="true" aria-controls="collapseListGroup3"> Collapsible list group #3</a>
      </h4>
    </div>
    <div id="collapseListGroup3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading3" aria-expanded="true">
      <ul class="list-group">
        <li class="list-group-item">Bootply</li>
        <li class="list-group-item">One itmus ac facilin</li>
        <li class="list-group-item">Second eros</li>
      </ul>
    </div>
  </div>
</div>

js-cookie

Cookieの使用はいたって簡単で

値をセットする

Cookies.set('name', 'value');

Cookieの期限も設定できる。expiresオプション。下記の例では７日間です。

Cookies.set('name', 'value', { expires: 7 });

Railsで使用する場合はこのオプションとパスを設定しないとうまく動作しないようです。

【Rails】RailsとJQueryでCookieを相互に利用したい時に気をつけるべき2つの注意点 - 働かないで3億貯めてさっさとリタイアするブログ

値を読むこむ

Cookies.get('name'); // => 'value'

Cookieを削除

Cookies.remove('name');

オプションはEncode/Decodeオプション、Secure属性を付加するためのsecureオプションというものがあります。
今回の場合はidを読み書きするだけなので、設定はしてません。

JavaScript(jQuery)

// http://stackoverflow.com/questions/12733238/retain-twitter-bootstrap-collapse-state-on-page-refresh-navigation

$(document).ready(function () {
  //when a group is shown, save it as the active accordion group
  $("#accordion").on('shown.bs.collapse', function () {
      var active = $("#accordion .in").attr('id');
      Cookies.set('activeAccordionGroup', active, { expires: 7 });
      alert(active);
  });
  $("#accordion").on('hidden.bs.collapse', function () {
      Cookies.remove('activeAccordionGroup');
  });
  var last = Cookies.get('activeAccordionGroup');
  if (last != null) {
    //remove default collapse settings
    $("#accordion .collapse").removeClass('in');
    //show the account_last visible group
    $("#" + last).addClass("in");
  }
});