Collapse (コラプス)

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

On this page

How it works

collapse JavaScript プラグインは、コンテンツの表示と非表示に使用されます。ボタンやアンカーは、トグルする特定の要素にマッピングされたトリガーとして使われます。要素を折りたたむと height が現在の値から 0 にアニメーションします。 CSSがアニメーションをどのように扱うかを考えると、.collapse 要素に padding を使うことはできません。代わりに、このクラスを独立したラッピング要素として使用します。

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

Example

下のボタンをクリックすると、クラス変更による別の要素の表示・非表示を切り替えることができます。

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

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

Link with 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>

Multiple targets

<button>または <a> は、href属性または data-bs-target 属性のセレクターで参照することにより、複数の要素を表示および非表示にすることができます。複数の<button>または <a> は、それぞれがhrefまたは data-bs-target 属性で要素を参照する場合、要素を表示および非表示にすることができます

Toggle first element

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>

Accessibility

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

control要素が単一の折りたたみ可能な要素をターゲットにしている場合、つまり data-bs-target 属性が id セレクタを指している場合、折りたたみ可能な要素の id を含む aria-controls 属性を control要素に追加しなければなりません。最近のスクリーンリーダや同様の支援技術では、この属性を利用して、折りたたみ可能な要素自体に直接移動するための追加のショートカットをユーザーに提供しています。

Bootstrapの現在の実装は、WAI-ARIA Authoring Practices 1.1 accordion patternで説明されている様々なキーボードインタラクションをカバーしていないことに注意してください - カスタムJavaScriptでこれらを自分で含める必要があります。

Sass

Variables

$transition-collapse:         height .35s ease;

Classes

Collapse のトランジションクラスは、複数のコンポーネント(collapse and accordion)で共有されているため、scss/_transitions.scss にあります。

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

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

Usage

collapse プラグインは、いくつかのクラスを利用して重い作業を処理します。

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

These classes can be found in _transitions.scss.

Via data attributes

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

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

Via JavaScript

手動で有効にする場合

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

Options

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

Name	Type	Default	Description
`parent`	selector \| jQuery object \| DOM element	`false`	parentが指定された場合、この折りたたみ可能な項目が表示されたときに、指定された親の下にあるすべての折りたたみ可能な要素が閉じられます。(従来のアコーディオンの動作に似ています - これは `card` クラスに依存します)。属性は、対象の折りたたみ可能な領域に設定する必要があります。
`toggle`	boolean	`true`	呼び出し時に折りたたみ可能な要素をトグルします。

Methods

非同期のメソッドとトランジション

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

詳しくは JavaScript のドキュメントをご覧ください。

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

コンストラクタを使用して、例えばcollapseのインスタンスを作成することができます。

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

Method	Description
`toggle`	折りたたみ可能な要素の表示・非表示を切り替えます。折りたたみ可能な要素が実際に表示または非表示になる前に呼び出し元に戻ります。 (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs).
`show`	折りたたみ可能な要素を表示します。折りたたみ可能な要素が実際に表示される前に呼び出し元に戻ります。 (e.g., before the `shown.bs.collapse` event occurs).
`hide`	折りたたみ可能な要素を非表示にします。折りたたみ可能な要素が実際に隠される前に呼び出し元に戻ります。 (e.g., before the `hidden.bs.collapse` event occurs).
`dispose`	要素の崩壊を破壊する。
`getInstance`	DOM 要素に関連付けられた collapse インスタンスを取得する静的メソッドです。

Events

Bootstrapのcollapseクラスは、collapse機能にフックするためのいくつかのイベントがあります。

Event type	Description
show.bs.collapse	このイベントは、`show`インスタンスメソッドが呼び出されたときにすぐに発生します。
shown.bs.collapse	このイベントは、collapse 要素がユーザーに見えるようになったときに発生します（CSS トランジションが完了するのを待ちます）。
hide.bs.collapse	このイベントは、`hide`メソッドが呼ばれたときにすぐに発生します。
hidden.bs.collapse	このイベントは、collapse 要素がユーザーから隠されたときに発生します（CSS トランジションが完了するのを待ちます）。

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