Bootstrapのアコーディオンで必ず１つは開いているようにするには？

Bootstrapにはアコーディオンのコンポーネントがある。

Javascript · Bootstrap

普通ならこういった動作で問題ないのだけど、アコーディオンをタブ的に使うには問題がある。

つまり、必ず１つはアコーディオンが開いているようにするにはどうしたらいいだろうか？

まずHTMLはこんな感じ。

<div id="accordion" class="accordion">

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#pane1">toggle1</a>
        </div>
        <div id="pane1" class="accordion-body collapse in">
            <div class="accordion-inner">pane1</div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#pane2">toggle2</a>
        </div>
        <div id="pane2" class="accordion-body collapse">
            <div class="accordion-inner">pane2</div>
        </div>
    </div>

</div>

JSはこんな感じ。

$(document).ready(function() {

  //アコーディオンを必ず一つは開くようにする
  var $toggles = $(".accordion-toggle");
  for (var i = 0; i < $toggles.length; i++) {
    var $toggle = $toggles.eq(i);
    $toggle.on("click", function(evt) {
      var $pane = $($(this).attr("href"));
      if ($pane.hasClass("in")) {
        console.log("表示されてるので閉じないようする");
        evt.preventDefault();
        evt.stopPropagation();
      }
    });
  }

});

これでOK。

全てのaccordion-toggleクラスを持つ要素に、クリックされた時に自分が開いていたら何もしないようにイベントハンドラーを登録する。

jsfiddleにて。