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

Pocket

bootstrap3-collapse
Bootstrap3ではCollapseという聞き慣れない呼び名になっていますが、要はアコーディオンパネルのこと。jQueryが使える人なら自力で作れそうな感じだけれど、実は以外と作るの難しいんです。

今開いてるものを閉じつつ、押したところを開くっていうのがアコーディオンの重要なポイント。これをうまく活用すれば、Webサービス系のサイトにあるQ&Aページのようなものが簡単につくれます。

このページではBootstrap3で用意されているアコーディオンとCollapseの基本的な使い方からjavascriptを使った応用的な使い方まで紹介していきます。

Bootstrap3 アコーディオンの基本的な使い方

Bootstrap3のCollapseをアコーディオン風に使う

基本的にはアコーディオンパネルとして使う方法があります。タイトルをクリックするとbody部分が開くという仕組み。

<!-- 
  id : ここで指定したidとタイトル部分のdata-parentを合わせる
-->

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">

        <!-- 
          data-toggle : Collapseを起動させる
          data-parent : アコーディオン風に閉じたり開いたりするためのもの
          href : 指定した場所のパネルを開く
        -->
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          タイトル #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        <h3>アコーディオンの中身</h3>
        <ul>
          <li>リスト1</li>
          <li>リスト2</li>
          <li>リスト3</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          タイトル #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          タイトル #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Bootstrap3のCollapseシステムではこのようなアコーディオンタイプの他に、ボタンを押して何かを開いたり閉じたりといった使い方も可能。

例えばECサイトでサイドのカテゴリツリーを閉じたり、FAQページでボタンを押して回答を表示させたりできます。

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

<!-- 
  .collapse : コンテンツを隠す
  .collapse.in : コンテンツを開いた状態にする
-->

<div id="demo" class="collapse">
  <h3>アコーディオンの中身</h3>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
</div>

デモページ

Bootstrap3のCollapse.jsの使い方

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

  • .collapse(‘toggle’):閉じたり開いたり
  • .collapse(‘show’):開く
  • .collapse(‘hide’):閉じる

使い方はこんな感じ。

//クリックしたらイベント発動
$('#collapse_icon').click(function () {

//指定したidを閉じたり開いたり
  $('#demo2').collapse('toggle');
});

また、各動作ごとにイベントハンドラも用意されています。

  • show.bs.collapse:showメソッドが呼ばれたときに発動
  • shown.bs.collapse:開き終わったら発動
  • hide.bs.collapse:hideメソッドが呼ばれたときに発動
  • hidden.bs.collapse:閉じ終わったら発動
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

デモページ