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

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

Javascript · Bootstrap

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

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

まず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にて。


コメント

このブログの人気の投稿

レオナルド・ダ・ビンチはなぜノートを「鏡文字」で書いたのか?

macでsmb(samba)共有サーバーに別名で接続(別アカウント名で接続)する方法

Google Mapの各ズームレベルごとのピクセル数と距離の関係