collapse.js

クラスを少しだけ活用して切り替え動作を簡単にする柔軟なプラグインです。

プラグイン依存
折りたたみ(collapse)は、そのBootstrapのバージョンのトランジションのプラグインを必要とします。

• 使用例
• アコーディオンの例
• 使用方法
• オプション
• メソッド
• イベント

使用例

ボタンをクリックすることで、クラスの変更を通じてその下の別の要素の表示/非表示を行います。

• .collapseはコンテンツを非表示時にします。
• .collapsingはトランジション期間(移り変わりの状態)を適用します。
• .collapse.inはコンテンツを表示します。

href属性付きのリンク、またはdata-target属性付きのボタンを使用することが可能です。 いずれの場合も、data-toggle="collapse"が必須です。

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

アコーディオンの例

デフォルトの折りたたみ(collapse)の挙動を拡張し、パネルコンポーネントを使用してアコーディオンを作成します。

<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">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <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" 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">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <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" 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">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <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>

.panel-bodyを.list-groupに取り替えることも可能です。

使用方法

collapseプラグインは、その動作のために幾つかのクラスを活用します。

• .collapseはコンテンツを隠します。
• .collapse.inはコンテンツを表示します。
• .collapsingはトランジションの開始時に追加され、完了時に削除されます。

これらのクラスは、component-animations.less内で見つけることが出来ます。

data属性を使用

要素へdata-toggle="collapse"とdata-targetを追加するだけで、 折りたたみ要素への制御が自動的に割り当てられます。 data-target属性は折りたたみを適用するためにCSSセレクタを受け取ります。 collapseクラスを折りたたみ要素へ、追加するようにしてください。 もしデフォルトで折りたたみを開いておきたいのであれば、inクラスを追加してください。

JavaScriptを使用

手動で有効化します。

$('.collapse').collapse()

オプション

オプションはdata属性またはJavaScriptを通して渡すことが可能です。 data属性では、data-parent=""のようにオプション名の前にdata-を追加します。

オプション

.collapse(options)

コンテンツを切り替え要素として有効化します。 任意のoptionsオブジェクトを受け取ります。

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

折りたたみ要素の表示/非表示を切り替えます。

.collapse('show')

折りたたみ要素を表示します。

.collapse('hide')

折りたたみ要素を非表示にします。

メソッド

Bootstrapのcollapseクラスには、折りたたみ機能へのフックのために幾つかのイベントが用意されています。

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

 Back to top