アコーディオン～Bootstrap5設置ガイド

使い方（how it works）

アコーディオンは内部で折り畳みを使用して折り畳み可能にする。展開されたアコーディオンをレンダリングするには、.accordion に .open クラスを追加。

このコンポーネントのアニメーション効果は、prefers-reduced-motion メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするに記載。

実例（Example）v5.0.0-beta1設定変更

以下のアコーディオンをクリックして、アコーディオンのコンテンツを展開/折り畳む。

見本

これが最初のアイテムのアコーディオン本体。折りたたみプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトで表示される。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を上書きして、これらのいずれかが変更可能。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが .accordion-body 内に入る可能性があることにも注意。

これは2番目のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を上書きして、これらのいずれかが変更可能。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが .accordion-body 内に入る可能性があることにも注意。

これは3番目のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を上書きして、これらのいずれかが変更可能。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが .accordion-body 内に入る可能性があることにも注意。

Bootstrapv5.0.0-alpha3～の設定例緑背景が変更箇所

<div class="accordion" id="accordionExample">
	<div class="accordion-item">
		<h2 class="accordion-header" id="headingOne">
			<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
				アコーディオン・アイテム #1
			</button>
		</h2>
		<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				<strong>これが最初のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header" id="headingTwo">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
				アコーディオン・アイテム #2
			</button>
		</h2>
		<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				<strong>これは2番目のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header" id="headingThree">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
				アコーディオン・アイテム #3
			</button>
		</h2>
		<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				<strong>これは3番目のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
</div>

※Bootstrapv5.0.0-alpha2の設定例（ボタンが `button.btn`）赤背景が変更箇所

<div class="accordion" id="accordionExample">
	<div class="card">
		<div class="card-header p-0" id="headingOne">
			<h2 class="mb-0">
				<button class="btn btn-light btn-block text-left p-3 rounded-0" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					アコーディオン・アイテム #1
				</button>
			</h2>
		</div>

		<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
			<div class="card-body">
				<strong>これが最初のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
	<div class="card">
		<div class="card-header p-0" id="headingTwo">
			<h2 class="mb-0">
				<button class="btn btn-light btn-block text-left collapsed p-3 rounded-0" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
					アコーディオン・アイテム #2
				</button>
			</h2>
		</div>
		<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
			<div class="card-body">
				<strong>これは2番目のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
	<div class="card">
		<div class="card-header p-0" id="headingThree">
			<h2 class="mb-0">
				<button class="btn btn-light btn-block text-left collapsed p-3 rounded-0" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
					アコーディオン・アイテム #3
				</button>
			</h2>
		</div>
		<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
			<div class="card-body">
				<strong>これは3番目のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
</div>

※Bootstrap4.xの設定例（ボタンが `a.btn`）赤背景が変更箇所

<div class="accordion" id="accordionExample" 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>
		<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionExample">
			<div class="card-body">
				<strong>これは最初のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
	<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>
		<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordionExample">
			<div class="card-body">
				<strong>これは2番目のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
	<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>
		<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordionExample">
			<div class="card-body">
				<strong>これは3番目のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
</div>

【設定】

div.accordion[id="アコーディオンID"] > {div.accordion-item > [h2.accordion-header > button.accordion-button.collapsed[data-bs-bs-toggle="collapse"][data-bs-target="#アイテムID"]]《ヘッダ》 + [div.accordion-collapse.collapse[id="アイテムID"][data-bs-parent="#アコーディオンID"] > div.accordion-body]《コンテンツ》}・・・
最初からパネルが開いた状態にする場合（上記見本の「アイテム1」で実現）は、
- button.accordion-button.collapsed[data-bs-toggle="collapse"] から .collapsed を外し
- div.accordion-collapse.collapse に .show を追加
div.accordion-collapse.collapse に data-bs-parent 属性を設定すれば、別のアイテムを開くと開いていたアイテムが閉じられるようになる

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

button.accordion-button[data-bs-toggle="collapse"] に、
- aria-expanded="false" 属性（支援技術に要素の開閉の状態を伝える）
  最初からパネルが開いた状態にする場合は、aria-expanded 属性は、false ではなく true にする
- aria-controls="コンテンツのID" 属性（ヘッダのリンクとコンテンツを関連付ける）
を入れる
div.accordion-collapse.collapse に、
- aria-labelledby="ヘッダのID" 属性（ヘッダとコンテンツを関連付ける）
を入れる

【変更履歴】

【v5.0.0-alpha3】
- カードコンポーネントクラス（.card-*）から独自のアコーディオンコンポーネントクラスの設定に変更（.accordion-* を新設）
【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - [data-toggle="collapse"] ⇒ [data-bs-toggle="collapse"]
  - [data-target] ⇒ [data-bs-target]
  - [data-parent] ⇒ [data-bs-parent]

枠なし（Flush）v5.0.0-alpha3新設

.accordion-flush を追加して、デフォルトの background-color、いくつかの境界線やいくつかの角丸を削除して、アコーディオンを親コンテナ要素と端から端までレンダリングする。

見本

このアコーディオンのプレースホルダーコンテンツ。これは、.accordion-flush クラスを示すことを目的としている。これが最初のアイテムのアコーディオン本体。

このアコーディオンのプレースホルダーコンテンツ。これは、.accordion-flush クラスを示すことを目的としている。これは2番目のアイテムのアコーディオン本体。これが実際のコンテンツで満たされていると想像しよう。

このアコーディオンのプレースホルダーコンテンツ。これは、.accordion-flush クラスを示すことを目的としている。これは3番目のアイテムのアコーディオン本体。ここではコンテンツに関してこれほどエキサイティングなことは何もないが、少なくとも一見すると、実際のアプリケーションでこれがどのように見えるかをもう少し代表するようにスペースを埋めるだけ。

設定例

<div class="accordion accordion-flush" id="accordionFlushExample">
	<div class="accordion-item">
		<h2 class="accordion-header" id="flush-headingOne">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
				アコーディオン・アイテム #1
			</button>
		</h2>
		<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">このアコーディオンのプレースホルダーコンテンツ...</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header" id="flush-headingTwo">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
				アコーディオン・アイテム #2
			</button>
		</h2>
		<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">このアコーディオンのプレースホルダーコンテンツ...</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header" id="flush-headingThree">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
				アコーディオン・アイテム #3
			</button>
		</h2>
		<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">このアコーディオンのプレースホルダーコンテンツ...</div>
		</div>
	</div>
</div>

【設定】

.accordion に .accordion-flush を追加

常時開示（Always open）v5.0.0新設

各 .accordion-collapse の data-bs-parent 属性を省略して、別のアイテムが開かれてもアコーディオンアイテムが開いたままになるようにする。

見本

設定例

<div class="accordion" id="accordionPanelsStayOpenExample">
	<div class="accordion-item">
		<h2 class="accordion-header" id="panelsStayOpen-headingOne">
			<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
				アコーディオン・アイテム #1
			</button>
		</h2>
		<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
			<div class="accordion-body">
				<strong>これが最初のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
				アコーディオン・アイテム #2
			</button>
		</h2>
		<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
			<div class="accordion-body">
				<strong>これは2番目のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header" id="panelsStayOpen-headingThree">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
				アコーディオン・アイテム #3
			</button>
		</h2>
		<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
			<div class="accordion-body">
				<strong>これは3番目のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
</div>

【設定】

.accordion-collapse にある data-bs-parent 属性を外す

アクセシビリティ（Accessibility）

詳細については、折り畳みアクセシビリティの項目に記載。

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定

scss/_variables.scss 内 accordion-variables の設定$accordion-padding-y:                     1rem;
$accordion-padding-x:                     1.25rem;
$accordion-color:                         $body-color;
$accordion-bg:                            $body-bg;
$accordion-border-width:                  $border-width;
$accordion-border-color:                  rgba($black, .125);
$accordion-border-radius:                 $border-radius;
$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width);

$accordion-body-padding-y:                $accordion-padding-y;
$accordion-body-padding-x:                $accordion-padding-x;

$accordion-button-padding-y:              $accordion-padding-y;
$accordion-button-padding-x:              $accordion-padding-x;
$accordion-button-color:                  $accordion-color;
$accordion-button-bg:                     $accordion-bg;
$accordion-transition:                    $btn-transition, border-radius .15s ease;
$accordion-button-active-bg:              tint-color($component-active-bg, 90%);
$accordion-button-active-color:           shade-color($primary, 10%);

$accordion-button-focus-border-color:     $input-focus-border-color;
$accordion-button-focus-box-shadow:       $btn-focus-box-shadow;

$accordion-icon-width:                    1.25rem;
$accordion-icon-color:                    $accordion-color;
$accordion-icon-active-color:             $accordion-button-active-color;
$accordion-icon-transition:               transform .2s ease-in-out;
$accordion-icon-transform:                rotate(-180deg);

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

前のページ
ページがありません次のページ
アラート

アコーディオン（Accordion） v5.0.0-alpha3設定変更 v5.0.0-alpha3「折り畳み」から分離

使い方（how it works）

実例（Example）v5.0.0-beta1設定変更

見本

アコーディオン・アイテム #1

アコーディオン・アイテム #2

アコーディオン・アイテム #3

Bootstrapv5.0.0-alpha3～の設定例 緑背景が変更箇所

※Bootstrapv5.0.0-alpha2の設定例（ボタンが button.btn）赤背景が変更箇所

※Bootstrap4.xの設定例（ボタンが a.btn） 赤背景が変更箇所

【設定】

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

【変更履歴】

枠なし（Flush）v5.0.0-alpha3新設

見本

アコーディオン・アイテム #1

アコーディオン・アイテム #2

アコーディオン・アイテム #3

設定例

【設定】

常時開示（Always open）v5.0.0新設

見本

アコーディオン・アイテム #1

アコーディオン・アイテム #2

アコーディオン・アイテム #3

設定例

【設定】

アクセシビリティ（Accessibility）

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定

ページ移動

Bootstrapv5.0.0-alpha3～の設定例緑背景が変更箇所

※Bootstrapv5.0.0-alpha2の設定例（ボタンが `button.btn`）赤背景が変更箇所

※Bootstrap4.xの設定例（ボタンが `a.btn`）赤背景が変更箇所