アコーディオン（Accordion） v5.0.0-alpha3設定変更 v5.0.0-alpha3「折り畳み」から分離
折り畳みJavaScriptプラグインと組み合わせて、垂直方向に折り畳むアコーディオンを作成。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
このページの項目 v5.0.0-alpha3設定変更 v5.0.0-alpha3「折り畳み」から分離
使い方（how it works）
アコーディオンは内部で折り畳みを使用して折り畳める。展開されたアコーディオンをレンダリングするには、.accordion に .open クラスを追加。
このコンポーネントのアニメーション効果は、
prefers-reduced-motion メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするに記載。
実例（Example）v5.0.0-beta1設定変更、v5.2.0デザイン変更
以下のアコーディオンをクリックして、アコーディオンのコンテンツを展開/折り畳む。
見本
これが最初のアイテムのアコーディオン本体。折りたたみプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトで表示される。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を再定義して、これらのいずれかが変更できる。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが
.accordion-body 内に入る可能性があることにも注意。
これは2番目のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を再定義して、これらのいずれかが変更できる。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが
.accordion-body 内に入る可能性があることにも注意。
これは3番目のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を再定義して、これらのいずれかが変更できる。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが
.accordion-body 内に入る可能性があることにも注意。
Bootstrap5.0.0-beta1～の設定例 緑背景が変更箇所
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button type="button" class="accordion-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 type="button" class="accordion-button collapsed" 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 type="button" class="accordion-button collapsed" 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>※Bootstrap5.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 type="button" class="btn btn-light btn-block text-left p-3 rounded-0" 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 type="button" class="btn btn-light btn-block text-left collapsed p-3 rounded-0" 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 type="button" class="btn btn-light btn-block text-left collapsed p-3 rounded-0" 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]
- 【v5.2.0】
border-radiusの値を調整したので、若干丸みを帯びたデザインに変更
枠なし（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 type="button" class="accordion-button collapsed" 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 type="button" class="accordion-button collapsed" 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 type="button" class="accordion-button collapsed" 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 属性を省略して、別のアイテムが開かれてもアコーディオンアイテムが開いたままになるようにする。
見本
これが最初のアイテムのアコーディオン本体。折りたたみプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトで表示される。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を再定義して、これらのいずれかが変更できる。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが
.accordion-body 内に入る可能性があることにも注意。
これは2番目のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を再定義して、これらのいずれかが変更できる。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが
.accordion-body 内に入る可能性があることにも注意。
これは3番目のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を再定義して、これらのいずれかが変更できる。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが
.accordion-body 内に入る可能性があることにも注意。
設定例
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button type="button" class="accordion-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 type="button" class="accordion-button collapsed" 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 type="button" class="accordion-button collapsed" 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）
詳細については、折り畳みアクセシビリティの項目に記載。
CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更
CSS変数（Variables）v5.2.0設定移行
Bootstrapの進化するCSS変数アプローチの一環として、アコーディオンは、リアルタイムのカスタマイズを強化するために、.accordion でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。
デフォルトの設定
scss/_accordion.scss 内 accordion-css-vars の設定--#{$prefix}accordion-color: #{color-contrast($accordion-bg)};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
Sass変数（Sass variables）v5.2.0変数から名称変更
デフォルトの設定
scss/_variables.scss 内 accordion-variables の設定$accordion-padding-y: 1rem;
$accordion-padding-x: 1.25rem;
$accordion-color: var(--#{$prefix}body-color);
$accordion-bg: $body-bg;
$accordion-border-width: $border-width;
$accordion-border-color: var(--#{$prefix}border-color);
$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: var(--#{$prefix}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>");
ページ移動
前のページ
ページがありません
ページがありません