崩壊

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

このページでは

使い方

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

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

例

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

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

通常、data-bs-target属性を持つボタンを使用することをお勧めします。セマンティックの観点からは推奨されませんが、href属性 (およびrole="button") を含むリンクを使用することもできます。どちらの場合も、data-bs-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-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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>

水平

折りたたみプラグインは、水平折りたたみもサポートしています。.collapse-horizontal修飾子クラスを追加して、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-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      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>のセレクターを使用して複数の要素を参照することで、複数の要素を表示および非表示にすることができます。複数のorがそれぞれのor属性で要素を参照している場合、要素を表示および非表示にすることができますhrefdata-bs-target<button><a>hrefdata-bs-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-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

アクセシビリティ

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

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

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

サス

変数

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

クラス

折りたたみ遷移クラスは、scss/_transitions.scss複数のコンポーネント (折りたたみとアコーディオン) で共有されるため、にあります。

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

使用法

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

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

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

データ属性経由

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

折りたたみ可能な領域にアコーディオンのようなグループ管理を追加するには、 data 属性を追加しますdata-bs-parent="#selector"。詳しくはアコーディオンのページをご覧ください。

JavaScript 経由

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

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

オプション

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

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

メソッド

非同期メソッドと遷移

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

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

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

次の例のように、コンストラクターを使用して折りたたみインスタンスを作成できます。

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

方法	説明
`toggle`	折りたたみ可能な要素を表示または非表示に切り替えます。折りたたみ可能な要素が実際に表示または非表示になる前 (つまり、orイベントが発生する前)に呼び出し元に戻ります。`shown.bs.collapsehidden.bs.collapse`
`show`	折りたたみ可能な要素を示します。折りたたみ可能な要素が実際に表示される前 (たとえば、イベントが発生する前)に呼び出し元に戻ります。`shown.bs.collapse`
`hide`	折りたたみ可能な要素を非表示にします。折りたたみ可能な要素が実際に非表示になる前 (たとえば、イベントが発生する前)に呼び出し元に戻ります。`hidden.bs.collapse`
`dispose`	要素の崩壊を破棄します。(DOM要素に格納されたデータを削除します)
`getInstance`	DOM 要素に関連付けられた折りたたみインスタンスを取得できる静的メソッドです。次のように使用できます。`bootstrap.Collapse.getInstance(element)`
`getOrCreateInstance`	DOM 要素に関連付けられた折りたたみインスタンスを返すか、初期化されていない場合は新しいインスタンスを作成する静的メソッド。次のように使用できます。`bootstrap.Collapse.getOrCreateInstance(element)`

イベント

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

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

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})