コラプス

基礎知識

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

例

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

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

一般的には、data-bs-target属性を持つ<button>を使用することを推奨しています。意味的な観点からは推奨されませんが、<a>リンクにhref属性（とrole="button"）を使用することもできます。どちらの場合も、data-bs-toggle="collapse"は必須です。

<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プラグインは水平方向の折りたたみをサポートしています。.collapse-horizontal修飾クラスを追加してheightの代わりにwidthを遷移させ、直下の子要素にwidthを設定します。独自のカスタムSassを書いたり、インラインスタイルを使ったり、私たちのwidthユーティリティを使ったりすることができます.

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

<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を追加してください。 この属性は、コントロールに関連付けられた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でこれらを自分で含める必要があります。

CSS

Sass変数変数

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

クラス

Collapseのトランジションクラスは、複数のコンポーネント(collapse and accordion)で共有されているため、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コンテンツを非表示にする
• .collapse.showコンテンツを表示する
• .collapsingはトランジションの開始時に追加され、終了時に削除されます。

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

データ属性

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

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

Via JavaScript

手動で有効にする場合

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

オプション

オプションはデータ属性やJavaScriptで渡すことができるので、data-bs-animation="{value}"のように、data-bs-にオプション名を付加することができる。データ属性でオプションを渡す場合は、オプション名の大文字と小文字を"camelCase“から”kebab-case“に変更することを忘れないようにしましょう。例えば、data-bs-customClass="beautifier"の代わりに data-bs-custom-class="beautifier"を使用します。

Bootstrap 5.2.0では、全てのコンポーネントが 実験的 予約データ属性 data-bs-config をサポートしており、JSON文字列として簡単なコンポーネント設定を収容することができます。要素に data-bs-config='{"delay":0, "title":123}'とdata-bs-title="456"属性がある場合、 titleの最終値は 456で、別々のデータ属性は data-bs-configで与えられた値を上書きする。また、既存のデータ属性にはdata-bs-delay='{"show":0, "hide":150}'のようなJSON値を格納することができるようになっています。

最終的なコンフィギュレーションオブジェクトは data-bs-config、data-bs-、js objectのマージ結果であり、最新のキー値が他の値を上書きする。

Methods

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

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

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

イベント

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})