Collapse

Collapse(コラプス)は,クラスとJavaScriptのプラグインを使用して, コンテンツの折り畳みができます。

How it works

ボタンやアンカーをトリガーにして, コンテンツの折り畳みができます。
要素を折り畳むと, height が現在の値から 0 にアニメーションで切り替わります。 .collapse 要素では padding は使用できません。代わりに, 独立したラッピング要素としてクラスを使用します。

Example

クラスの変更で要素を表示したり非表示にするには,

.collapse 隠す
.collapsing 遷移中に適用される。
.collapse.show 表示する

href 属性をもつリンクや data-target 属性をもつボタンで使用可能です。どちらも data-toggle="collapse" が必要です。

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" 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>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Multiple targets

<button> や <a> は data-target 属性のJQueryセレクタを使用して複数の要素を参照する場合, 要素を表示および非表示にすることが可能です。

Toggle first element

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Accordion example

card を利用するとアコーディオンの作成が可能です。

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 class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-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="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-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="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-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>

Accessibility

コントロール要素(リンク,ボタンなど）に aria-expanded を追加してください。スクリーンリーダー(や同様の技術)に明示的に伝えるためです。
デフォルトが閉じている場合は, コントロール要素の属性は aria-expanded="false" にする必要があります。デフォルトで開くように設定した場合は aria-expanded="true" を設定します。
プラグインは, 折り畳み可能な要素が開いているか閉じているかを属性を自動的に切り替えます。コントロール要素のHTML要素がボタンではない場合（例：<a> や <div> ）role="button" 属性を要素に追加する必要があります。

data-target 属性が id セレクタを指している場合, id を含むコントロール要素に追加の aria-controls 属性を追加できます。　　スクリーンリーダーはこの属性を利用して折り畳み可能な要素自体に直接移動するショートカットを提供できます。

現在の実装は WAI-ARIA Authoring Practices 1.1 accordion pattern で説明されています。

Usage

collapseプラグインでは開閉処理を取り扱うために, いくつかのクラスを使用できます。

.collapse 隠す
.collapse.show 表示する
.collapsing 遷移すると追加され, 終了すると削除します。

Via data attributes

data-toggle="collapse" と data-target を適用するとコントロールが自動で割り当てられます。data-target は collapse を適用するとCSSセレクタを受け入れます。
折り畳み可能な場合は collapse を摘要する必要があります。デフォルトで開いている場合は, show が必要です。

折り畳み可能な領域にアコーディオンのようなグループ管理を追加するには, データ属性 data-parent="#selector" を追加します。

Via JavaScript

マニュアルで追加します。

$('.collapse').collapse()

Options

オプションはデータ属性やJavaScriptで渡すことが可能です。 data- にオプション名を追加します。( data-parent="" のように)

Name	Type	Default	Description
parent	selector \| jQuery object \| DOM element	false	If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area.
toggle	boolean	true	Toggles the collapsible element on invocation

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

`.collapse(options)`

折り畳み可能な要素としてコンテンツをアクティブにします。

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

`.collapse('toggle')`

折り畳み可能な要素の表示/非表示に切り替えます。実際に表示されたり非表示にされる前（ shown.bs.collapse , hidden.bs.collapse が発生する前）に呼び出し元に戻ります。

`.collapse('show')`

折り畳み可能な要素の表示します。実際に表示される前（ shown.bs.collapse が発生する前）に呼び出し元に戻ります。

`.collapse('hide')`

折り畳み可能な要素の表示します。実際に非表示になる前（ hidden.bs.collapse が発生する前）に呼び出し元に戻ります。

`.collapse('dispose')`

折り畳みを破棄します。

Events

いくつかのイベントが用意されています。

Event Type	Description
show.bs.collapse	This event fires immediately when the `show` instance method is called.
shown.bs.collapse	This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.collapse	This event is fired immediately when the `hide` method has been called.
hidden.bs.collapse	This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

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

v4.2