折り畳み（Collapse） v5.0.0設定変更

概要（How it works）

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

基本の設定（Example）v5.3.1設定変更

以下のボタンをクリックすると、クラスを変更して他の要素を表示したり非表示にする：

• .collapse でコンテンツを隠す
• 遷移中に .collapsing が適用される
• .collapse.show でコンテンツを表示

通常、data-bs-target 属性を持つ <button> の使用を推奨。セマンティックの観点からは推奨されないが、href 属性（と role="button"）を持つ <a> リンクでも使用できる。どちらの場合も、data-bs-toggle="collapse" が必要。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<p class="d-inline-flex gap-1">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    リンク式
  </a>
  <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    ボタン式
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    折り畳みコンポーネントのプレースホルダコンテンツ。...
  </div>
</div>

水平方向に折り畳む（Horizontal）v5.1.0新設（v4.6.2でバックポート）

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

見本

設定例

<p>
  <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    切替ボタン
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      これは、水平方向の折り畳みのプレースホルダコンテンツ。デフォルトでは非表示になっており、起動されると表示される。
    </div>
  </div>
</div>

複数の切替とターゲット（Multiple toggles and targets）v5.3.1設定変更

<button> 要素や <a> 要素は、その data-bs-target 属性や href 属性にセレクタを指定して参照すれば、複数の要素を表示・非表示にでき、逆に複数の <button> 要素や <a> 要素が、それぞれ data-bs-target 属性や href 属性で参照すれば、同じ要素を表示したり非表示にしたりできる。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<p class="d-inline-flex gap-1">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">第1要素の切替</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">第2要素の切替</button>
  <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">両方の要素を切替</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        この複数の折り畳みの見本の1番目の折り畳みコンポーネントのプレースホルダコンテンツ。...
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        この複数の折り畳みの見本の2番目の折り畳みコンポーネントのプレースホルダコンテンツ。...
      </div>
    </div>
  </div>
</div>

アクセシビリティ（Accessibility）

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

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

Bootstrapの現在の実装では、ARIA Authoring Practices Guide accordion patternで説明されているさまざまな任意のキーボードの相互作用はカバーしていないので注意。任意のJavaScriptでこれらを組み込む必要がある。

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sass変数（Sass variables）v5.3.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 collapse-transition の設定$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

クラス（Classes）

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

デフォルトの設定

scss/_transitions.scss 内 collapse-classes の設定.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);
  }
}

使用方法（Usage）

折り畳みプラグインは、上下動による開閉処理を取り扱うために、いくつかのクラスを使用：

• .collapse：コンテンツを非表示
• .collapse.show：コンテンツを表示
• .collapsing：遷移が開始されると追加され、終了すると削除される

これらのクラスは、_transitions.scss の中にある。

データ属性経由で（Via data attributes）

data-bs-toggle="collapse" と data-bs-target を要素に追加するだけで、単独や複数の折り畳み可能な要素の制御が自動的に割り当てられる。data-bs-target 属性は、折り畳みを適用するCSSセレクタを受け入れる。折り畳み可能な要素には必ず .collapse を追加する。デフォルトで開いた状態にしたい場合は、.show を追加する。

折り畳み可能領域にアコーディオンのようなグループ管理を追加するには、データ属性 data-bs-parent="#selector" を追加する。詳細については、アコーディオンに記載。

JavaScript経由で（Via JavaScript）v5.2.0設定変更

手動で有効にする：

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

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

※Bootstrap4.xの設定例

JavaScript$('.collapse').collapse()

オプション（Options）v5.2.1一部修正

オプションは、データ属性かJavaScriptを経由して渡すことができるため、data-bs-animation="{value}" のように、オプション名を data-bs- に追加できる。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース（単語の先頭を大文字にする）からケバブケース（単語をハイフンでつなぐ）にご変更下さい。例：data-bs-customClass="beautifier" ではなく、data-bs-custom-class="beautifier" を使用する。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント構成を格納できる実験的な予約済データ属性 data-bs-config をサポート。要素に data-bs-config='{"delay":0, "title":123}' と data-bs-title="456" 属性がある場合、最終的な title 値は 456 になり、個別のデータ属性は data-bs-config で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}' のようなJSON値を格納できる。

メソッド（Methods）v5.2.0設定変更、v5.0.2メソッド追加

コンテンツを折り畳み可能な要素としてアクティブ化し、オプションの object を受け入れる。

コンストラクタを使用して折り畳みインスタンスが作成できる。以下に例を表示：

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

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

※Bootstrap4.xの設定例

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

イベント（Events）

Bootstrapの折り畳みクラスは、折り畳み機能に接続するためにいくつかのイベントを公開している。

使用例 v5.2.0設定変更

JavaScriptconst myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // 何かをする...
})