Bootstrap3 アコーディオンとCollapseの簡単な使い方

Tweet

Pocket

Collapseはボタンやテキストリンクで開閉するコンテンツを作れる便利なコンポーネント。使いどころとしてはメニューの開閉やQ&Aなどのコンテンツの開閉などです。

パネルを使うことでアコーディオンタイプにすることができ、開いているメニューを閉じつつ閉じているメニューを開くといったインタラクティブなエフェクトを付け加えることもできます。

Bootstrap3 Collapseの使い方

Collapseコンポーネントの基本的な構造は、開閉ボタンとコンテンツの２つ。コンテンツの方にはclassにcollapseと付けるだけでOK。ボタンの方はdata-toggleとdata-targetの２つが必要です。data-targetの方は開閉したいコンテンツのidかclass名と紐付ける必要があるので注意。

あと、開閉ボタンはボタンではなく、テキストリンクでも可能です。その場合data-targetはhrefで代用できるので覚えておきましょう。テキストリンクを使うことでメニューの開閉が可能になります。

<!-- 
  data-toggle : Collapseを起動させる
  data-target : ここで指定したid（classでも可）とボタンを紐づける
-->
<button type="button" class="btn btn-default btn-sm" data-toggle="collapse" data-target="#demo">
  ボタンで開閉
</button>

<!-- 
  id        : ボタンと紐付いたid、classでも可
  .collapse : コンテンツを隠す
  .collapse.in : コンテンツを開いた状態
-->
<div id="demo" class="collapse">
  <h3>アコーディオンの中身</h3>
  <ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
  </ul>
</div>

デモページはこちら

Collapseをアコーディオンパネル風に使う方法

先ほどはボタンを使ってコンテンツを開閉しましたが、Webサイトでよく見かけるアコーディオンタイプのCollapseパネルを作ることもできます。

構造は少し複雑になっていますが、先ほどのボタンにあったdata-targetがaタグのhrefに置き換わり、#accordionという名前のidをつけたpanel-groupで囲んであげるだけです。

アコーディオン風に開いてるパネルを自動で閉じるには、data-parentが必要になるので忘れず追加しましょう。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          コンテンツ１のトグルボタン
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        コンテンツ１
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          コンテンツ２のトグルボタン
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        コンテンツ２
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          コンテンツ３のトグルボタン
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        コンテンツ３
      </div>
    </div>
  </div>
</div>

デモページはこちら

Collapse.jsの使い方

Collapseの開閉操作をjavascriptで制御することもできます。

//クリックしたらイベント発動
$('.toggle-btn').click(function () {
  //指定したidを閉じたり開いたり
  $('.collapse-content').collapse('toggle');
});

また、各動作ごとにイベントハンドラも用意されています。対象のコンテンツが開いたり閉じたりした時に使えます。

// 開き終わったらテキスト書き換え
$('.collapse-content').on('shown.bs.collapse', function () {
  $(this).text('開き終わりました');
});

デモページはこちら