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

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

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

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

概要(How it works)

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

 

基本の設定(Example)

クラスの変更経由で別の要素を表示したり非表示にするには、以下のボタンをクリック:

  • .collapse はコンテンツを隠す
  • 遷移中に .collapsing が適用される
  • .collapse.show はコンテンツを表示

href 属性を持つリンク、または data-target 属性を持つボタンが使用可能。どちらの場合も、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"(支援技術にボタンの役割を伝える)を入れる

 

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

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

見本

第1要素のコンテンツ。第1要素のコンテンツ。第1要素のコンテンツ。第1要素のコンテンツ。
第2要素のコンテンツ。第2要素のコンテンツ。第2要素のコンテンツ。第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要素のコンテンツ。第1要素のコンテンツ。第1要素のコンテンツ。第1要素のコンテンツ。
			</div>
		</div>
	</div>
	<div class="col">
		<div class="collapse multi-collapse" id="multiCollapseExample2">
			<div class="card card-body">
				第2要素のコンテンツ。第2要素のコンテンツ。第2要素のコンテンツ。第2要素のコンテンツ。
			</div>
		</div>
	</div>
</div>

【設定】

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

 

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

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

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

見本
アイテム1のコンテンツ
アイテム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">
				アイテム1のコンテンツ
			</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" 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">
				アイテム1のコンテンツ
			</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" 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" 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 属性を設定すれば、別のパネルを開くと開いていたパネルを閉じるようになる

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

  • 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.1.0】.accordion が追加

    タイトルのリンク部分の文字色:text-darktext-body

【Bootstrap3.xとの変更箇所】

  • 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

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

見本
アイテム1のコンテンツ
アイテム2のコンテンツ
アイテム3のコンテンツ
CSSコピー.card .card-header a[data-toggle="collapse"] {
	display: block;
	padding: .75rem 1.25rem;
	margin: -.75rem -1.25rem;
}
.card .card-header a[data-toggle="collapse"]:active,
.card .card-header a[data-toggle="collapse"]:hover,
.card .card-header a[data-toggle="collapse"]:focus {
	text-decoration: none; //リンクテキストの下線を消す
}

開くコンテンツの表示部分がリストグループ

見本
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" 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 を使用

【Bootstrap3.xとの変更箇所】

  • ul.list-group.list-group-flush を追加
  • div.collapsestyle="height: 0px;" の設定は不要に

※折りたたみの切替で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の現在の実装では、WAI-ARIAオーサリングプラクティス1.1のアコーディオンパターンで説明されているさまざまなキーボードの相互作用はカバーしていないので注意。任意のJavaScriptでこれらを組み込む必要がある。

 

使用方法(Usage)

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

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

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

データ属性経由で(Via data attributes)

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

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

JavaScript経由で(Via JavaScript)

手動で有効にする:

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

オプション(Options)v4.0.0-beta.2一部追加

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

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

【変更履歴】

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

メソッド(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-beta.2追加

要素の折り畳みを破棄。

イベント(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 () {
	// 何かをする...
})