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

Pocket

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

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

Bootstrap3 Collapseの使い方

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

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

Class名 概要
data-toggle="collapse" 開閉ボタンに必要
data-target="#demo" 開閉ボタンに必要、開閉するコンテンツと紐付ける
.collapse コンテンツが閉じた状態
.collapsing トランジションが発生している状態
.collapse.in コンテンツが見えている状態
<!-- 
  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>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
</div>

デモページはこちら

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

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

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

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

Class名 概要
data-toggle="collapse" 開閉ボタンに必要
data-parent="#accordion" アコーディオンを作る時に必要、親要素のidと紐付ける
href="#collapseOne" 開閉するコンテンツと紐付ける
<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">
          コンテンツ1のトグルボタン
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        コンテンツ1
      </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">
          コンテンツ2のトグルボタン
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        コンテンツ2
      </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">
          コンテンツ3のトグルボタン
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        コンテンツ3
      </div>
    </div>
  </div>
</div>

デモページはこちら

Collapse.jsの使い方

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

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

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

function名 概要
show.bs.collapse showメソッドが呼ばれたときに発動
shown.bs.collapse 開き終わったら発動
hide.bs.collapse hideメソッドが呼ばれたときに発動
hidden.bs.collapse 閉じ終わったら発動
// 開き終わったらテキスト書き換え
$('.collapse-content').on('shown.bs.collapse', function () {
  $(this).text('開き終わりました');
});

デモページはこちら