崩壊

いくつかのクラスと JavaScript プラグインを使用して、プロジェクト全体のコンテンツの表示を切り替えます。

使い方

コンテンツの表示と非表示には、collapse JavaScript プラグインが使用されます。ボタンまたはアンカーは、切り替える特定の要素にマップされるトリガーとして使用されます。要素を折りたたむとheight、現在の値からにアニメーション化され0ます。paddingCSS がアニメーションを処理する方法を考えると、.collapse要素では使用できません。代わりに、クラスを独立したラッピング要素として使用してください。

このコンポーネントのアニメーション効果は、prefers-reduced-motionメディアクエリに依存します。アクセシビリティドキュメントの縮小モーションセクションを参照してください。

例

下のボタンをクリックして、クラスの変更によって別の要素を表示および非表示にします。

.collapseコンテンツを非表示にします
.collapsing遷移中に適用されます
.collapse.showコンテンツを表示

属性を持つリンクhref、または属性を持つボタンを使用できdata-targetます。どちらの場合も、data-toggle="collapse"が必要です。

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>

複数のターゲット

<button>orは、 or属性<a>の JQuery セレクターを使用して複数の要素を参照することで、複数の要素を表示および非表示にすることができます。複数のorがそれぞれのor属性で要素を参照している場合、要素を表示および非表示にすることができますhrefdata-target<button><a>hrefdata-target

最初の要素を切り替え

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>

アコーディオンの例

cardコンポーネントを使用すると、デフォルトの折りたたみ動作を拡張してアコーディオンを作成できます。アコーディオンスタイルを適切に実現するには、必ず.accordionラッパーとして使用してください。

アニムパリチュルクリシェreprehenderit、エニムeiusmodハイライフアキュマステリーリチャードソンとイカ。3 ウルフムーンオフィシアオーテ、ノンキューピダットスケートボードドロールブランチ。フードトラックキノア nesciunt labourum eiusmod。ブランチ 3 オオカミの月の一時、サントアリクア、鳥を乗せたイカ、シングルオリジンのコーヒーヌラ、アセンダ、ショアディッチなど。Nihil anim keffiyeh helvetica, クラフトビール労働者 wes anderson cred nesciunt sapiente ea proident. Adveganexcepteurブッチャーバイスロモ。レギンスは、農場から食卓までのクラフトビール、生のデニムの美的シンセ、おそらく聞いたことがないかもしれません。

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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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>

アクセシビリティ

aria-expanded必ずコントロール要素に追加してください。この属性は、コントロールに関連付けられた折りたたみ可能な要素の現在の状態を、スクリーンリーダーや同様の支援技術に明示的に伝えます。折りたたみ可能な要素がデフォルトで閉じられている場合、コントロール要素の属性の値はaria-expanded="false"です。showクラスを使用して折りたたみ可能な要素をデフォルトで開くように設定した場合はaria-expanded="true"、代わりにコントロールに設定します。プラグインは、(JavaScript を介して、またはユーザーが同じ折りたたみ要素に関連付けられている別のコントロール要素をトリガーしたために) 折りたたみ可能な要素が開かれたか閉じられたかに基づいて、コントロールでこの属性を自動的に切り替えます。コントロール要素の HTML 要素がボタンでない場合 (例:<a>または<div>)、属性role="button"要素に追加する必要があります。

コントロール要素が単一の折りたたみ可能な要素をターゲットにしている場合 (つまり、属性がセレクターdata-targetを指している場合)、折りたたみ可能な要素のを含む属性をコントロール要素に追加する必要があります。最新のスクリーンリーダーや同様の支援技術は、この属性を利用して、折りたたみ可能な要素自体に直接移動するための追加のショートカットをユーザーに提供します。idaria-controlsid

Bootstrap の現在の実装は、 WAI-ARIA Authoring Practices 1.1 アコーディオンパターンで説明されているさまざまなキーボード操作をカバーしていないことに注意してください。カスタム JavaScript でこれらを自分で含める必要があります。

使用法

崩壊プラグインは、いくつかのクラスを利用して、重労働を処理します。

.collapseコンテンツを非表示にします
.collapse.show内容を示します
.collapsingトランジションの開始時に追加され、終了時に削除されます

これらのクラスはにあります_transitions.scss。

データ属性経由

data-toggle="collapse"要素にとを追加するだけdata-targetで、1 つまたは複数の折りたたみ可能な要素の制御を自動的に割り当てることができます。このdata-target属性は、折りたたみを適用する CSS セレクターを受け入れます。collapse折りたたみ可能な要素にクラスを必ず追加してください。デフォルトで開くようにしたい場合は、追加の class を追加しますshow。

折りたたみ可能な領域にアコーディオンのようなグループ管理を追加するには、 data 属性を追加しますdata-parent="#selector"。実際の動作については、デモを参照してください。

JavaScript 経由

次を使用して手動で有効にします。

$('.collapse').collapse()

オプション

オプションは、データ属性または JavaScript を介して渡すことができます。data-データ属性の場合、オプション名をのようにに追加しますdata-parent=""。

名前	タイプ	デフォルト	説明
親	セレクター \| jQuery オブジェクト \| DOM 要素	間違い	親が指定されている場合、この折りたたみ可能なアイテムが表示されると、指定された親の下にあるすべての折りたたみ可能な要素が閉じられます。(従来のアコーディオンの動作に似ています - これはクラスに依存します`card`)。属性は、ターゲットの折りたたみ可能領域に設定する必要があります。
トグル	ブール値	真実	呼び出し時に折りたたみ可能な要素を切り替えます

メソッド

非同期メソッドと遷移

すべての API メソッドは非同期であり、遷移を開始します。トランジションが開始されるとすぐに呼び出し元に戻りますが、トランジションが終了する前に戻ります。さらに、遷移中のコンポーネントでのメソッド呼び出しは無視されます。

詳細については、JavaScript のドキュメントを参照してください。

`.collapse(options)`

折りたたみ可能な要素としてコンテンツをアクティブにします。オプションのオプションを受け入れますobject。

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

`.collapse('toggle')`

折りたたみ可能な要素を表示または非表示に切り替えます。折りたたみ可能な要素が実際に表示または非表示になる前 (つまり、orイベントが発生する前)に呼び出し元に戻ります。shown.bs.collapsehidden.bs.collapse

`.collapse('show')`

折りたたみ可能な要素を示します。折りたたみ可能な要素が実際に表示される前 (つまり、イベントが発生する前)に呼び出し元に戻ります。shown.bs.collapse

`.collapse('hide')`

折りたたみ可能な要素を非表示にします。折りたたみ可能な要素が実際に非表示になる前 (つまり、イベントが発生する前)に呼び出し元に戻ります。hidden.bs.collapse

`.collapse('dispose')`

要素の崩壊を破棄します。

イベント

Bootstrap の collapse クラスは、collapse 機能にフックするためのいくつかのイベントを公開します。

イベントタイプ	説明
show.bs.collapse	`show`このイベントは、インスタンスメソッドが呼び出されるとすぐに発生します。
shown.bs.collapse	このイベントは、折りたたみ要素がユーザーに表示されると発生します (CSS トランジションが完了するのを待ちます)。
hide.bs.collapse	`hide`このイベントは、メソッドが呼び出されるとすぐに発生します。
hidden.bs.collapse	このイベントは、折りたたみ要素がユーザーから隠されているときに発生します (CSS トランジションが完了するのを待ちます)。

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

崩壊

使い方

例

複数のターゲット

アコーディオンの例

折りたたみ可能なグループ アイテム #1

折りたたみ可能なグループ アイテム #2

折りたたみ可能なグループ アイテム #3