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

折り畳みJavaScriptプラグインと組み合わせて、垂直方向に折り畳むアコーディオンを作成。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

このページの項目 v5.3.0設定変更 v5.0.0「折り畳み」から分離

使い方（how it works）

アコーディオンは内部で折り畳みを使用して折り畳める。

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

実例（Example）v5.3.0設定変更、v5.2.0デザイン変更

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

デフォルトで展開されているアコーディオンをレンダリングする：

.accordion-collapse 要素に .show クラスを追加。
.accordion-button 要素から .collapsed クラスを削除し、その aria-expanded 属性を true に設定。

見本

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

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

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

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <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" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>これが最初のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <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" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>これは2番目のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <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" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>これは3番目のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
</div>

Bootstrap5.2.xの設定例緑背景が5.0.0-beta1での変更箇所、赤背景が5.3.0での変更箇所

<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" 属性（ヘッダのリンクとアイテム本体を関連付ける）
を入れる

【変更履歴】

【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 の値を調整したので、若干丸みを帯びたデザインに変更
【v5.3.0】
- .accordion-header の id="ヘッダID" と .accordion-collapse の aria-labelledby="ヘッダID" 属性（ヘッダとコンテンツの関連付け）は不要に

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

.accordion-flush を追加して罫線や角丸を取り除き、アコーディオンを親コンテナ要素と端から端までレンダリングする。

見本

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

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

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

Bootstrap5.3.0の設定例緑背景が変更箇所

<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <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" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">このアコーディオンのプレースホルダコンテンツ...</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <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" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">このアコーディオンのプレースホルダコンテンツ...</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <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" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">このアコーディオンのプレースホルダコンテンツ...</div>
    </div>
  </div>
</div>

※Bootstrap5.2.xの設定例赤背景が変更箇所

<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 属性を省略して、別のアイテムが開かれてもアコーディオンアイテムが開いたままになるようにする。

見本

Bootstrap5.3.xの設定例緑背景が変更箇所

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <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">
      <div class="accordion-body">
        <strong>これが最初のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <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"">
      <div class="accordion-body">
        <strong>これは2番目のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <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">
      <div class="accordion-body">
        <strong>これは3番目のアイテムのアコーディオン本体。</strong>...
      </div>
    </div>
  </div>
</div>

※Bootstrap5.2.xの設定例赤背景が変更箇所

<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: #{$accordion-color};
--#{$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-button-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:                            var(--#{$prefix}body-bg);
$accordion-border-width:                  var(--#{$prefix}border-width);
$accordion-border-color:                  var(--#{$prefix}border-color);
$accordion-border-radius:                 var(--#{$prefix}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:                  var(--#{$prefix}body-color);
$accordion-button-bg:                     var(--#{$prefix}accordion-bg);
$accordion-transition:                    $btn-transition, border-radius .15s ease;
$accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle);
$accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis);

// fusv-disable
$accordion-button-focus-border-color:     $input-focus-border-color; // v5.3.3では非推奨
// fusv-enable
$accordion-button-focus-box-shadow:       $btn-focus-box-shadow;

$accordion-icon-width:                    1.25rem;
$accordion-icon-color:                    $body-color;
$accordion-icon-active-color:             $primary-text;
$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='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>");
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>");

使用方法（Usage）v5.3.6新設

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

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

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

データ属性経由で（Via data attributes）

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

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

JavaScript経由で（Via JavaScript）

手動で有効にする：

設定例

JavaScriptconst accordionCollapseElementList = document.querySelectorAll('#myAccordion .collapse')
const accordionCollapseList = [...accordionCollapseElementList].map(accordionCollapseEl => new bootstrap.Collapse(accordionCollapseEl))

オプション（Options）

オプションは、データ属性かJavaScriptを経由して渡すことができるため、data-bs-animation="{value}" のように、オプション名を data-bs- に追加できる。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース（単語の先頭を大文字にする）からケバブケース（単語をハイフンでつなぐ）にご変更ください。例：data-bs-customClass="beautifier" ではなく、data-bs-custom-class="beautifier" を使用する。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント構成を格納できる実験的な予約済データ属性 data-bs-config をサポート。要素に data-bs-config='{"delay":0, "title":123}' と data-bs-title="456" 属性がある場合、最終的な title 値は 456 になり、個別のデータ属性は data-bs-config で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}' のようなJSON値を格納できる。

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

メソッド（Methods）

すべてのAPIメソッドは非同期で遷移を開始する。これらは、遷移が開始されるとすぐに呼び出し元に戻るが遷移が終了する前に戻る。さらに遷移中のコンポーネントでのメソッド呼び出しは無視される。詳細については、Javascriptのドキュメントに記載。

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

コンストラクタを使用して折り畳みインスタンスが作成できる。以下に例を表示：

設定例

JavaScriptconst bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

メソッド	説明
`dispose`	要素の折り畳みを破棄（DOM要素に保存されているデータを削除）。
`getInstance`	DOM要素に関連付けられた折り畳みインスタンスを取得できる静的メソッドで、次のように使用可能：`bootstrap.Collapse.getInstance(element)`
`getOrCreateInstance`	DOM要素に関連付けられているか初期化されていない場合は新しい要素を作成して折り畳みインスタンスを返す静的メソッド。次のように使用可能：`bootstrap.Collapse.getOrCreateInstance(element)`
`hide`	折り畳み可能な要素を非表示にする。折り畳み可能な要素が実際に非表示にされる前（つまり、`hidden.bs.collapse` イベントが発生する前）に呼び出し元に戻る。
`show`	折り畳み可能な要素を表示。折り畳み可能な要素が実際に表示される前（つまり、`shown.bs.collapse` イベントが発生する前）に呼び出し元に戻る。
`toggle`	折り畳み可能な要素を表示か非表示に切り替える。折り畳み可能な要素が実際に表示されたり非表示にされる前（つまり、`shown.bs.collapse` か `hidden.bs.collapse` イベントが発生する前）に呼び出し元に戻る。

イベント（Events）

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

イベントタイプ	説明
`hide.bs.collapse`	`hide` のメソッドが呼び出されると直ちに発動。
`hidden.bs.collapse`	折り畳み要素がユーザーから非表示になったときに発動（完全にCSS遷移が完了するまで待機）。
`show.bs.collapse`	`show` のインスタンス・メソッドが呼び出されると直ちに発動。
`shown.bs.collapse`	ユーザーに折り畳み要素が表示されたときに発動（完全にCSS遷移が完了するまで待機）。

使用例

JavaScriptconst myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // 何かをする...
})

前のページ
ページがありません

次のページ
アラート

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

使い方（how it works）

実例（Example）v5.3.0設定変更、v5.2.0デザイン変更

見本

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

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

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

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

Bootstrap5.2.xの設定例 緑背景が5.0.0-beta1での変更箇所、赤背景が5.3.0での変更箇所

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

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

【設定】

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

【変更履歴】

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

見本

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

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

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

Bootstrap5.3.0の設定例 緑背景が変更箇所

※Bootstrap5.2.xの設定例 赤背景が変更箇所

【設定】

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

見本

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

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

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

Bootstrap5.3.xの設定例 緑背景が変更箇所

※Bootstrap5.2.xの設定例 赤背景が変更箇所

【設定】

アクセシビリティ（Accessibility）

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0設定移行

デフォルトの設定

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

使用方法（Usage）v5.3.6新設

データ属性経由で（Via data attributes）

JavaScript経由で（Via JavaScript）

設定例

オプション（Options）

メソッド（Methods）

設定例

イベント（Events）

使用例

ページ移動

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

Bootstrap5.2.xの設定例緑背景が5.0.0-beta1での変更箇所、赤背景が5.3.0での変更箇所

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

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

Bootstrap5.3.0の設定例緑背景が変更箇所

※Bootstrap5.2.xの設定例赤背景が変更箇所

Bootstrap5.3.xの設定例緑背景が変更箇所

※Bootstrap5.2.xの設定例赤背景が変更箇所