Collapse

仕組み

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

例

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

• .collapse はコンテンツを非表示にします
• .collapsing はトランジション中に適用されます
• .collapse.show はコンテンツを表示します

一般的に、data-bs-target属性を持つ<button>を使用することをお勧めします。セマンティックな観点からは推奨されませんが、href属性（およびrole="button"）を持つ<a>リンクも使用できます。どちらの場合も、data-bs-toggle="collapse"が必要です。

<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">
    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プラグインは、水平方向の折りたたみに対応しています。heightの代わりにwidthをトランジションするには、.collapse-horizontalモディファイアクラスを追加し、直下の子要素にwidthを設定します。独自のカスタムSassを作成したり、インラインスタイルを使用したり、幅ユーティリティを使用したりできます。

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

<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">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属性がidセレクターを指している場合は、コントロール要素にaria-controls属性を追加し、折りたたみ可能要素のidを含める必要があります。最新のスクリーンリーダーや同様の支援技術は、この属性を使用して、ユーザーが折りたたみ可能要素自体に直接移動するための追加のショートカットを提供します。

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

CSS

Sass変数

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

クラス

collapseトランジションクラスは、複数のコンポーネント（collapseと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属性を使用

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

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

JavaScriptを使用

手動で有効にするには

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

オプション

オプションはdata属性またはJavaScriptを介して渡すことができるため、data-bs-animation="{value}"のようにオプション名をdata-bs-に追加できます。data属性を介してオプションを渡す場合は、オプション名のケースタイプを「camelCase」から「kebab-case」に変更してください。たとえば、data-bs-customClass="beautifier"の代わりにdata-bs-custom-class="beautifier"を使用します。

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

最終的な構成オブジェクトは、data-bs-config、data-bs-、およびjs objectのマージされた結果であり、最新の指定されたキーと値が他の値をオーバーライドします。

メソッド

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

コンストラクターでcollapseインスタンスを作成できます。たとえば

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

イベント

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

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