崩壊

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

使い方

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

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

例

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

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

通常、data-target属性を持つボタンを使用することをお勧めします。セマンティックの観点からは推奨されませんが、href属性 (およびrole="button") を含むリンクを使用することもできます。どちらの場合も、data-toggle="collapse"が必要です。

href とのリンク

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

<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">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

水平

折りたたみプラグインは、水平折りたたみもサポートしています。.width修飾子クラスを追加して、width代わりに遷移し、直接の子要素にheighta を設定します。width独自のカスタム Sass を作成したり、インラインスタイルを使用したり、幅ユーティリティを使用したりしてください。

min-height以下の例には、ドキュメントでの過度の再描画を避けるためのセットがありますが、これは明示的に必須ではないことに注意してください。子要素ののみが必要です。width

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

複数のターゲット

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

最初の要素を切り替え

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

<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">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

アコーディオンの例

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

最初のアコーディオンパネルのプレースホルダーコンテンツ。.showクラスのおかげで、このパネルはデフォルトで表示されます。

Some placeholder content for the second accordion panel. This panel is hidden by default.

And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" 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">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

アクセシビリティ

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

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

Bootstrap の現在の実装は、 ARIA オーサリングプラクティスガイドのアコーディオンパターンで説明されているさまざまなキーボード操作をカバーしていないことに注意してください。カスタム 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