使い方(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
を追加
アクセシビリティ(Accessibility)
詳細については、折り畳みアクセシビリティの項目に記載。
ページ移動
前のページ
ページがありません次のページ
アラート
ページがありません次のページ
アラート