メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

折り畳み(Collapse) v4.4.1一部変更

少しのクラスとJavaScriptプラグインを使用して、プロジェクト全体のコンテンツの可視性を切り替える。

概要(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>

【設定】

  • コントロールがリンクの場合:a.btn[data-toggle="collapse"][href="#ID"][role="button"]《ボタン》 + div#ID.collapse《コンテンツ》
  • コントロールがボタンの場合:button.btn[data-toggle="collapse"][data-target="#ID"]《ボタン》 + div#ID.collapse《コンテンツ》
  • コンテンツ表示部分を div.card.card-body にすると表示部分がわかりやすい

アクセシビリティの設定】

  • コントロール用のリンクやボタン部分には、
    • aria-expanded="false"属性(支援技術に要素の開閉の状態を伝える)
    • aria-controls="コンテンツのID"属性(リンク、ボタンリンク、ボタンとコンテンツの関連付け)
    を入れる
  • コントロールが <button> でない場合は、その要素に role="button"(支援技術にボタンの役割を伝える)を入れる

 

水平方向に折り畳む(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>
【設定】
  • .collapse.width を追加
【注意】
  • スムーズに表示できるように子要素に width の設定を入れる(解説文には割合幅ユーティリティクラス(.w-{%})の記載もあるが、表示の動作がスムーズではないので推奨しない)

 

複数のターゲット(Multiple targets)v4.0.0新設

<button><a> は、hrefdata-target 属性のjQueryセレクタを使用して複数の要素を参照および非表示にすることが可能。複数の <button><a> は、それぞれが hrefdata-target 属性で要素を参照する場合、それらの要素を表示および非表示にすることが可能。

見本

この複数の折り畳みの見本の1番目の折り畳みコンポーネントのプレースホルダーコンテンツ。このパネルはデフォルトでは非表示になっているが、ユーザーが関連するトリガーをアクティブにすると表示される。
この複数の折り畳みの見本の2番目の折り畳みコンポーネントのプレースホルダーコンテンツ。このパネルはデフォルトでは非表示になっていますが、ユーザーが関連するトリガーをアクティブにすると表示されます。
設定例
<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>

【設定】

  • 1つのボタンで2つの要素を同時に切り替えるようにするには、[data-target] に共通するクラスを指定

 

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

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

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

見本 ※Bootstrapの公式サイトの見本とは異なります(カードヘッダのどこをクリックしても開閉可能)
最初のアコーディオンパネルのプレースホルダーコンテンツ。.show クラスのおかげで、このパネルはデフォルトで表示されます。
2番目のアコーディオンパネルのプレースホルダーコンテンツ。このパネルはデフォルトで非表示になっています。
そして最後に、3番目で最後のアコーデオンパネルのプレースホルダーコンテンツ。このパネルはデフォルトで非表示になっています。
Bootstrap3.xの設定例 赤背景が変更箇所
<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 -->
Bootstrap4.xの設定例 緑背景が変更箇所
<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 -->

【設定】

  • div.accordion[id="accordion"] > {div.card > [div.card-header > a.text-body.collapsed[data-toggle="collapse"][href="#ID1"]]《カードヘッダ》 + [div.collapse[id="ID2"][data-parent="#accordion"] > div.card-body]《カードコンテンツ》}・・・
  • div.accordion[id="accordion"].accordion を入れると一連のカードのような表示になる
    カードの間に空白をあけるには、.accordion を入れずに各 div.card空白ユーティリティクラスを使用(最後のカード以外に .mb-2(下側に0.5remのマージン)を追加など)
  • 最初からパネルが開いた状態にする場合(上記見本の「アイテム1」で実現)は、
    • a.text-body.collapsed[data-toggle="collapse"] から .collapsed を外し
    • .collapse.show を追加
  • div.collapsedata-parent 属性を設定すれば、別のカードを開くと開いていたカードが閉じられるようになる
  • a[data-toggle="collapse"].d-block.p-3.m-n3 を追加するとカードヘッダのどこをクリックしても開閉可能になる

アクセシビリティの設定】

  • div[id="accordion"] に、role="tablist" 属性(支援技術にタブリストの役割を伝える)を入れる
  • .card-header に、role="tab" 属性(支援技術にタブの役割を伝える)を入れる
  • a[data-toggle="collapse"] に、
    • aria-expanded="false" 属性(支援技術に要素の開閉の状態を伝える)
      最初からパネルが開いた状態にする場合は、aria-expanded 属性は、false ではなく true にする
    • aria-controls="カードコンテンツのID" 属性(カードヘッダのリンクとカードコンテンツを関連付ける)
    • role="button"(支援技術にボタンの役割を伝える)
    を入れる
  • div.collapse に、
    • role="tabpanel" 属性(支援技術にパネルの役割を伝える)
    • aria-labelledby="カードヘッダのID" 属性(カードヘッダとカードコンテンツを関連付ける)
    を入れる

【変更履歴】

  • 【v4.0.0】
    • div.panel-group[id="accordion"]div[id="accordion"]
    • div.panel.panel-defaultdiv.card
    • div.panel-headingdiv.card-header
    • タイトルのリンク部分の文字色をデフォルトと同じにするため、<a>.text-body を追加
    • .panel-title.panel-collapse の設定は不要に
    • [data-parent="#accordion"] の設定:a[data-toggle="collapse"]内 ⇒ div.collapse
    • div.panel-bodydiv.card-body
    • メニューが開いた状態:.collapse.in.collapse.show
  • 【v4.1.0】
    • .accordion が追加
    • タイトルのリンク部分の文字色:text-darktext-body
  • 【v4.4.1】
    • カードヘッダのどこをクリックしても開閉可能な仕様に変更(a.text-body.d-block.p-3.m-n3 を追加)
      ※これに伴い裏技の「カードヘッダのどこをクリックしても開閉可能」を削除

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

見本 ※カードヘッダのどこをクリックしても開閉可能
Bootstrap3.xの設定例 赤背景が変更箇所
<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 -->
Bootstrap4.xの設定例 緑背景が変更箇所
<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 -->

【設定】

  • div.card-body の代わりに ul.list-group.list-group-flush > li.list-group-item を使用

【変更履歴】

  • 【v4.0.0】
    • ul.list-group.list-group-flush を追加
    • div.collapsestyle="height: 0px;" の設定は不要に
  • 【v4.4.1】
    • カードヘッダのどこをクリックしても開閉可能な仕様に変更(a.text-body.d-block.p-3.m-n3 を追加)

※折りたたみの切替で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- にオプション名を追加すること。

名前 タイプ デフォルト 説明
parent selector | jQuery object | DOM element
v4.0.0タイプ追加
false parentが指定されている場合、指定された親要素の下にある折り畳み可能な要素は、この折り畳み可能なアイテムが表示されているときに閉じられる。(従来のアコーディオンの動作に似ている - これは card クラスに依存)
属性は、折り畳み可能な領域に設定する必要がある。
toggle boolean true 呼び出し時に折り畳み可能な要素を切り替える。
true:有効/false:無効

【変更履歴】

  • 【v4.0.0】
    • parent のタイプに jQuery objectDOM element が追加

メソッド(Methods)

.collapse(options)

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

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

.collapse('toggle')

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

.collapse('show')

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

.collapse('hide')

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

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

要素の折り畳みを破棄。

イベント(Events)

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

イベントタイプ 説明
show.bs.collapse このイベントは、show のインスタンス・メソッドが呼び出されると直ちに発動。
shown.bs.collapse このイベントは、ユーザーに折り畳み要素が表示されたときに発動(完全にCSS遷移が完了するまで待機)。
hide.bs.collapse このイベントは、hide のメソッドが呼び出されると直ちに発動。
hidden.bs.collapse このイベントは、折り畳み要素がユーザーから非表示になったときに発動(完全にCSS遷移が完了するまで待機)。
使用例
JavaScript$('#myCollapsible').on('hidden.bs.collapse', function () {
	// 何かをする...
})