折りたたみ
いくつかのクラスとJavaScriptプラグインを使用して、プロジェクト全体でコンテンツの表示と非表示を切り替えます。
動作方法
collapse JavaScriptプラグインは、コンテンツの表示と非表示に使用されます。ボタンまたはアンカーは、切り替える特定の要素にマップされたトリガーとして使用されます。要素を折りたたむと、`height`が現在の値から`0`にアニメーション化されます。CSSがアニメーションを処理する方法を考えると、`.collapse`要素に`padding`を使用することはできません。代わりに、クラスを独立したラッパー要素として使用してください。
例
以下のボタンをクリックして、クラスの変更によって別の要素の表示と非表示を切り替えます。
- ` .collapse` はコンテンツを非表示にします。
- ` .collapsing` は遷移中に適用されます。
- ` .collapse.show` はコンテンツを表示します。
一般的に、`data-target`属性を持つボタンを使用することをお勧めします。セマンティックな観点からは推奨されませんが、`href`属性（と`role="button"`）を持つリンクを使用することもできます。どちらの場合も、`data-toggle="collapse"`が必要です。
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-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`を遷移させるには、`.width`修飾子クラスを追加し、子要素に`width`を設定します。独自のSassを作成したり、インラインスタイルを使用したり、幅のユーティリティを使用したりできます。
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
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-target`属性でjQueryセレクターを使用して参照することで、複数の要素の表示と非表示を切り替えることができます。複数の`<button>`または`<a>`は、それぞれが`href`または`data-target`属性で参照している場合、要素の表示と非表示を切り替えることができます。
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-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>アコーディオンの例
カードコンポーネントを使用すると、デフォルトの折りたたみ動作を拡張してアコーディオンを作成できます。アコーディオンスタイルを適切に実現するには、ラッパーとして`.accordion`を使用してください。
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>アクセシビリティ
コントロール要素に`aria-expanded`を追加してください。この属性は、スクリーンリーダーや同様の支援技術に、コントロールに関連付けられた折りたたみ可能な要素の現在の状態を明示的に伝えます。折りたたみ可能な要素がデフォルトで閉じている場合、コントロール要素の属性の値は`aria-expanded="false"`である必要があります。`show`クラスを使用して折りたたみ可能な要素をデフォルトで開くように設定した場合は、代わりにコントロールに`aria-expanded="true"`を設定します。プラグインは、折りたたみ可能な要素が開かれたか閉じられたか（JavaScript経由、またはユーザーが同じ折りたたみ可能な要素に関連付けられた別のコントロール要素をトリガーした場合）に応じて、コントロール上のこの属性を自動的に切り替えます。コントロール要素のHTML要素がボタンではない場合（例：`<a>`または`<div>`）、属性`role="button"`を要素に追加する必要があります。
コントロール要素が単一の折りたたみ可能な要素をターゲットにしている場合（つまり、`data-target`属性が`id`セレクターを指している場合）、コントロール要素に`aria-controls`属性を追加し、折りたたみ可能な要素の`id`を含める必要があります。最新のスクリーンリーダーや同様の支援技術は、この属性を使用して、ユーザーが折りたたみ可能な要素自体に直接移動するための追加のショートカットを提供します。
Bootstrapの現在の実装では、ARIAオーサリングプラクティスガイドのアコーディオンパターンで説明されているさまざまなキーボード操作はカバーされていません。これらはカスタムJavaScriptで自分で含める必要があります。
使用方法
collapseプラグインは、重い処理を処理するためにいくつかのクラスを使用します。
- ` .collapse` はコンテンツを非表示にします。
- ` .collapse.show` はコンテンツを表示します。
- ` .collapsing` は遷移が開始されたときに追加され、終了したときに削除されます。
これらのクラスは`_transitions.scss`にあります。
データ属性による方法
要素に`data-toggle="collapse"`と`data-target`を追加するだけで、1つ以上の折りたたみ可能な要素のコントロールを自動的に割り当てます。`data-target`属性は、折りたたみを適用するCSSセレクターを受け入れます。折りたたみ可能な要素に`collapse`クラスを追加してください。デフォルトで開くようにしたい場合は、`show`クラスを追加してください。
折りたたみ可能な領域にアコーディオンのようなグループ管理を追加するには、`data-parent="#selector"`というデータ属性を追加します。デモを参照して、これがどのように機能するかを確認してください。
JavaScriptによる方法
手動で有効にする
$('.collapse').collapse()
オプション
オプションは、データ属性またはJavaScriptを介して渡すことができます。データ属性の場合、`data-`にオプション名を付加します（例：`data-parent=""`）。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| parent | セレクター | jQueryオブジェクト | DOM要素 | false | parentが指定されている場合、この折りたたみ可能なアイテムが表示されると、指定されたparentの下にあるすべての折りたたみ可能な要素が閉じられます（従来のアコーディオンの動作に似ています - これは`card`クラスに依存します）。属性は、ターゲットの折りたたみ可能な領域に設定する必要があります。 |
| toggle | ブール値 | true | 呼び出し時に折りたたみ可能な要素を切り替えます。 |
メソッド
非同期メソッドとトランジション
すべてのAPIメソッドは**非同期**であり、**トランジション**を開始します。トランジションが開始されるとすぐに呼び出し元に返りますが、**終了する前**です。さらに、**トランジション中のコンポーネントへのメソッド呼び出しは無視されます**。
.collapse(options)
コンテンツを折りたたみ可能な要素としてアクティブにします。オプションのオプション`object`を受け入れます。
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
折りたたみ可能な要素を表示または非表示に切り替えます。**折りたたみ可能な要素が実際に表示または非表示になる前（つまり、`shown.bs.collapse`または`hidden.bs.collapse`イベントが発生する前）に呼び出し元に返ります。**
.collapse('show')
折りたたみ可能な要素を表示します。**折りたたみ可能な要素が実際に表示される前（つまり、`shown.bs.collapse`イベントが発生する前）に呼び出し元に返ります。**
.collapse('hide')
折りたたみ可能な要素を非表示にします。**折りたたみ可能な要素が実際に非表示になる前（つまり、`hidden.bs.collapse`イベントが発生する前）に呼び出し元に返ります。**
.collapse('dispose')
要素の折りたたみを破棄します。
イベント
Bootstrapのcollapseクラスは、折りたたみ機能にフックするためのいくつかのイベントを公開します。
| イベントタイプ | 説明 |
|---|---|
| show.bs.collapse | `show`インスタンスメソッドが呼び出されるとすぐに、このイベントが発生します。 |
| shown.bs.collapse | 折りたたみ可能な要素がユーザーに対して表示可能になったときに、このイベントが発生します（CSSトランジションが完了するのを待ちます）。 |
| hide.bs.collapse | `hide`メソッドが呼び出されるとすぐに、このイベントが発生します。 |
| hidden.bs.collapse | 折りたたみ可能な要素がユーザーから非表示になったときに、このイベントが発生します（CSSトランジションが完了するのを待ちます）。 |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})