折り畳み（Collapse） v4.4.1一部変更

概要（How it works）

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

基本の設定（Example）

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

• .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">
		リンク式
	</a>
	<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
		ボタン式
	</button>
</p>
<div class="collapse" id="collapseExample">
	<div class="card card-body">
		折り畳みコンポーネントのプレースホルダーコンテンツ。...
	</div>
</div>

水平方向に折り畳む（Horizontal）v4.6.2新設

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

見本

設定例

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

複数のターゲット（Multiple targets）v4.0.0新設

<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">第1要素の切替</a>
	<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">第2要素の切替</button>
	<button type="button" class="btn btn-primary" data-toggle="collapse" data-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>

アコーディオンの設定例（Accordion example）v4.4.1設定変更

カードコンポーネントによるアコーディオン

カードコンポーネントを使用すると、デフォルトの折り畳み動作を拡張してアコーディオンが作成可能。
デザインがv3のパネルからカードでの作成に変更。アコーディオンスタイルを正しく実現するには、.accordion を必ずラッパーとして使用すること。

見本 ※Bootstrapの公式サイトの見本とは異なります（カードヘッダのどこをクリックしても開閉可能）

<div class="panel-group" id="accordion" role="tablist">
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingOne">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
					アイテム1
				</a>
			</h4>
		</div><!-- /.panel-heading -->
		<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
			<div class="panel-body">
				最初のアコーディオンパネルのプレースホルダーコンテンツ。...
			</div><!-- /.panel-body -->
		</div><!-- /.panel-collapse -->
	</div><!-- /.panel -->
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingTwo">
			<h4 class="panel-title">
				<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
					アイテム2
				</a>
			</h4>
		</div><!-- /.panel-heading -->
		<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
			<div class="panel-body">
				2番目のアコーディオンパネルのプレースホルダーコンテンツ。...
			</div><!-- /.panel-body -->
		</div><!-- /.panel-collapse -->
	</div><!-- /.panel -->
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingThree">
			<h4 class="panel-title">
				<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
					アイテム3
				</a>
			</h4>
		</div><!-- /.panel-heading -->
		<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
			<div class="panel-body">
				そして最後に、3番目で最後のアコーデオンパネルのプレースホルダーコンテンツ。...
			</div><!-- /.panel-body -->
		</div><!-- /.panel-collapse -->
	</div><!-- /.panel -->
</div><!-- /#accordion -->

コピー<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
	<div class="card">
		<div class="card-header" role="tab" id="headingOne">
			<h5 class="mb-0">
				<a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
					アイテム1
				</a>
			</h5>
		</div><!-- /.card-header -->
		<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
			<div class="card-body">
				最初のアコーディオンパネルのプレースホルダーコンテンツ。...
			</div><!-- /.card-body -->
		</div><!-- /.collapse -->
	</div><!-- /.card -->
	<div class="card">
		<div class="card-header" role="tab" id="headingTwo">
			<h5 class="mb-0">
				<a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
					アイテム2
				</a>
			</h5>
		</div><!-- /.card-header -->
		<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
			<div class="card-body">
				2番目のアコーディオンパネルのプレースホルダーコンテンツ。...
			</div><!-- /.card-body -->
		</div><!-- /.collapse -->
	</div><!-- /.card -->
	<div class="card">
		<div class="card-header" role="tab" id="headingThree">
			<h5 class="mb-0">
				<a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
					アイテム3
				</a>
			</h5>
		</div><!-- /.card-header -->
		<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
			<div class="card-body">
				そして最後に、3番目で最後のアコーデオンパネルのプレースホルダーコンテンツ。...
			</div><!-- /.card-body -->
		</div><!-- /.collapse -->
	</div><!-- /.card -->
</div><!-- /#accordion -->

開くコンテンツの表示部分がリストグループ ※裏技、v4.4.1設定変更

見本 ※カードヘッダのどこをクリックしても開閉可能

<div class="panel panel-default">
	<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
		<h4 class="panel-title">
			<a href="#collapseListGroup1" class="collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseListGroup1"> 折り畳みリストグループ </a>
		</h4>
	</div><!-- /.panel-heading -->
	<div class="panel-collapse collapse" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="false" style="height: 0px;">
		<ul class="list-group">
			<li class="list-group-item">アイテム1</li>
			<li class="list-group-item">アイテム2</li>
			<li class="list-group-item">アイテム3</li>
		</ul>
		<div class="panel-footer">フッタ</div>
	</div><!-- /.panel-collapse -->
</div><!-- /.panel -->

コピー<div class="card">
	<div class="card-header" role="tab" id="collapseListGroupHeading1">
		<h5 class="mb-0">
			<a href="#collapseListGroup1" class="collapsed text-body d-block p-3 m-n3" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseListGroup1"> 折り畳みリストグループ </a>
		</h5>
	</div><!-- /.card-header -->
	<div class="collapse" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="false">
		<ul class="list-group list-group-flush">
			<li class="list-group-item">アイテム1</li>
			<li class="list-group-item">アイテム2</li>
			<li class="list-group-item">アイテム3</li>
		</ul>
		<div class="card-footer">フッタ</div>
	</div><!-- /.collapse -->
</div><!-- /.card -->

※折りたたみの切替でFont Awesome 5のアイコンを使用する方法をJSサンプル集に記載。

アクセシビリティ（Accessibility）

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

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

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

使用方法（Usage）

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

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

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

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

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

折り畳み可能領域にアコーディオンのようなグループ管理を追加するには、データ属性 data-parent="#selector" を追加する。これを実践するには、見本を参照すること。

JavaScript経由で（Via JavaScript）

手動で有効にする：

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

オプション（Options）v4.0.0一部追加

オプションは、データ属性かJavaScriptを使用して渡すことが可能。データ属性の場合、data-parent="" のように data- にオプション名を追加すること。

メソッド（Methods）

.collapse(options)

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

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

.collapse('toggle')

折り畳み可能な要素を表示や非表示に切り替える。折り畳み可能な要素が実際に表示されたり非表示にされる前（つまり、shown.bs.collapse か hidden.bs.collapse イベントが発生する前）に呼び出し元に戻る。

.collapse('show')

折り畳み可能な要素を表示。折り畳み可能な要素が実際に表示される前（つまり、shown.bs.collapse イベントが発生する前）に呼び出し元に戻る。

.collapse('hide')

折り畳み可能な要素を非表示にする。折り畳み可能な要素が実際に非表示にされる前（つまり、hidden.bs.collapse イベントが発生する前）に呼び出し元に戻る。

.collapse('dispose') v4.0.0追加

要素の折り畳みを破棄。

イベント（Events）

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

使用例

JavaScript$('#myCollapsible').on('hidden.bs.collapse', function () {
	// 何かをする...
})