いくつかのクラスと弊社の JavaScript プラグインを使用して、プロジェクト全体のコンテンツの表示/非表示を切り替えます。
Example
以下のボタンをクリックすると、クラスの変更によって別の要素を表示したり隠したりすることができます。
-
.collapseコンテンツを非表示にします -
.collapsingトランジション時に適用されます -
.collapse.showコンテンツを表示します
。
hrefdata-target属性のボタンを使用することができます。
リンク（href付き） ボタン（data-target付き）
複数のターゲット
<button><a>hrefdata-targethref属性のJQueryセレクタで複数の要素を参照することができます。複数の <button><a>hrefdata-target 属性で参照することができます
第一の要素を切り替える 第二の要素を切り替える 両方の要素を切り替える
アコーディオンの例
カードコンポーネントを使用すると、デフォルトの折りたたみ動作を拡張してアコーディオンを作成することができます。
折りたたみ可能なグループアイテム #1
Collapsible Group Item #2
Collapsible Group Item #3
アクセシビリティ
必ず control 要素に aria-expanded を追加してください。 この属性は、コントロールに関連付けられた折りたたみ可能な要素の現在の状態を、スクリーン リーダーや同様の支援技術に明示的に伝えます。 折りたたみ可能な要素がデフォルトで閉じられている場合、control要素の属性にはaria-expanded="false"showクラスを使用して折りたたみ可能な要素をデフォルトで開くように設定している場合は、代わりにcontrolにaria-expanded="true"を設定します。 プラグインは、折り畳み可能な要素が開かれたか閉じられたか（JavaScriptを介して、またはユーザーが同じ折り畳み可能な要素に関連付けられた別のコントロール要素をトリガーしたため）に基づいて、コントロールのこの属性を自動的に切り替えます。 コントロール要素のHTML要素がボタンではない場合（例えば、以下のような場合）。
制御要素の HTML 要素がボタンではない場合 (たとえば、<a><div>role="button"data-targetididaria-controls 属性を制御要素に追加する必要があります。
Bootstrap の現在の実装では、WAI-ARIA Authoring Practices 1.1 のアコーディオン パターンで説明されているさまざまなキーボード インタラクションをカバーしていないことに注意してください – カスタム JavaScript でこれらを含める必要があります。
使用方法
collapse プラグインは、重い作業を処理するためにいくつかのクラスを利用しています。
-
.collapseコンテンツを非表示にします -
.collapse.showコンテンツを表示します -
.collapsingトランジションが始まると追加され、終了すると削除されます。
これらのクラスは、_transitions.scssにあります。
Via data attributes
要素に data-toggle="collapse"data-targetdata-target属性には、折りたたみを適用するCSSセレクタを指定します。 折りたたみ可能な要素には、必ずクラス collapse を追加してください。
折りたたみ可能なエリアにアコーディオンのようなグループ管理を追加するには、データ属性 data-parent="#selector" を追加します。
Via JavaScript
次のようにして手動で有効にします：
$('.collapse').collapse()オプション
オプションはデータ属性またはJavaScriptで渡すことができます。 データ属性の場合は、data-parent=""data-にオプション名を追加します。
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | jQuery object | DOM element | false | parentが指定された場合。 の場合、この折りたたみ式のアイテムが表示されると、指定された親の下にあるすべての折りたたみ式の要素が閉じられます。 (伝統的なアコーディオンの動作に似ています。これは card クラスに依存しています)。 この属性は対象となる折りたたみ可能なエリアに設定する必要があります。 |
| toggle | boolean | true | 起動時に折り畳み可能な要素をトグルする |
メソッド
非同期のメソッドとトランジション
すべてのAPIメソッドは非同期で、トランジションを開始します。 トランジションが開始されると同時に呼び出し元に戻りますが、トランジションが終了する前に戻ります。
詳細については、JavaScriptのドキュメントを参照してください。
.collapse(options)
コンテンツを折りたたみ可能な要素としてアクティブにします。 任意のオプション object を受け入れます。
$('#myCollapsible').collapse({ toggle: false}).collapse('toggle')
折りたたみ可能な要素の表示・非表示を切り替えます。
.collapse('show')
折り畳み可能な要素を表示します。
.collapse('hide')
折りたたみ可能な要素を非表示にする場合、shown.bs.collapsehidden.bs.collapse イベントが発生する前に) 呼び出し元に返します。
.collapse('dispose')
要素の折りたたみを解除します。
イベント
Bootstrapの折りたたみクラスは、折りたたみ機能にフックするためのいくつかのイベントを公開しています。
| イベント Type | Description |
|---|---|
| show.bs.collapse | このイベントは、showのインスタンスメソッドが呼び出されたときに直ちに発生します。 |
| shown.bs.collapse | このイベントはcollapse要素がユーザーに見えるようになった時に発生します(CSSトランジションが完了するまで待ちます)。 |
| hide.bs.collapse | このイベントはhideメソッドが呼び出された時に直ちに発生します。 |
| hidden.bs.collapse | このイベントはcollapse要素がユーザーから隠されたときに発生します(CSSトランジションが完了するのを待ちます)。 |
$('#myCollapsible').on('hidden.bs.collapse', function () { // do something…})となります。