手風琴
搭配我們的 Collapse JavaScript 外掛程式，建立垂直折疊手風琴。
此頁面
運作方式
手風琴內部使用 折疊，使其可折疊。
此元件的動畫效果取決於
prefers-reduced-motion 媒體查詢。請參閱我們的 無障礙文件中的減少動作區段。
範例
按一下下方的手風琴，展開/折疊手風琴內容。
要呈現預設展開的手風琴
- 在
.accordion-collapse元素上新增.show類別。 - 從
.accordion-button元素中移除.collapsed類別，並將其aria-expanded屬性設定為true。
這是第一個項目手風琴主體。它預設顯示，直到摺疊外掛程式加入適當的類別，我們用來設定每個元素的樣式。這些類別控制整體外觀，以及透過 CSS 轉場顯示和隱藏。你可以使用自訂 CSS 或覆寫我們的預設變數來修改這些內容。另外值得注意的是，幾乎任何 HTML 都可以在
.accordion-body 中使用，儘管轉場會限制溢位。
這是第二個項目手風琴主體。它預設隱藏，直到摺疊外掛程式加入適當的類別，我們用來設定每個元素的樣式。這些類別控制整體外觀，以及透過 CSS 轉場顯示和隱藏。你可以使用自訂 CSS 或覆寫我們的預設變數來修改這些內容。另外值得注意的是，幾乎任何 HTML 都可以在
.accordion-body 中使用，儘管轉場會限制溢位。
這是第三個項目手風琴主體。它預設隱藏，直到摺疊外掛程式加入適當的類別，我們用來設定每個元素的樣式。這些類別控制整體外觀，以及透過 CSS 轉場顯示和隱藏。你可以使用自訂 CSS 或覆寫我們的預設變數來修改這些內容。另外值得注意的是，幾乎任何 HTML 都可以在
.accordion-body 中使用，儘管轉場會限制溢位。
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>齊平
加入 .accordion-flush 以移除一些邊框和圓角，讓手風琴與其父容器邊對邊呈現。
此手風琴的佔位內容旨在展示
.accordion-flush 類別。這是第一個項目的手風琴主體。此手風琴的佔位內容旨在展示
.accordion-flush 類別。這是第二個項目的手風琴主體。讓我們想像一下，這裡會填入一些實際內容。此手風琴的佔位內容旨在展示
.accordion-flush 類別。這是第三個項目的手風琴主體。在內容方面，這裡沒有更令人興奮的事情，只是填滿空間，讓它看起來，至少乍看之下，更能代表它在實際應用中的樣子。<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>
</div>始終開啟
省略每個 .accordion-collapse 上的 data-bs-parent 屬性，讓手風琴項目在開啟另一個項目時保持開啟。
這是第一個項目手風琴主體。它預設顯示，直到摺疊外掛程式加入適當的類別，我們用來設定每個元素的樣式。這些類別控制整體外觀，以及透過 CSS 轉場顯示和隱藏。你可以使用自訂 CSS 或覆寫我們的預設變數來修改這些內容。另外值得注意的是，幾乎任何 HTML 都可以在
.accordion-body 中使用，儘管轉場會限制溢位。
這是第二個項目手風琴主體。它預設隱藏，直到摺疊外掛程式加入適當的類別，我們用來設定每個元素的樣式。這些類別控制整體外觀，以及透過 CSS 轉場顯示和隱藏。你可以使用自訂 CSS 或覆寫我們的預設變數來修改這些內容。另外值得注意的是，幾乎任何 HTML 都可以在
.accordion-body 中使用，儘管轉場會限制溢位。
這是第三個項目手風琴主體。它預設隱藏，直到摺疊外掛程式加入適當的類別，我們用來設定每個元素的樣式。這些類別控制整體外觀，以及透過 CSS 轉場顯示和隱藏。你可以使用自訂 CSS 或覆寫我們的預設變數來修改這些內容。另外值得注意的是，幾乎任何 HTML 都可以在
.accordion-body 中使用，儘管轉場會限制溢位。
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>無障礙
請閱讀 折疊無障礙區段 以取得更多資訊。
CSS
變數
新增於 v5.2.0作為 Bootstrap 不斷演進的 CSS 變數方法的一部分，手風琴現在在 .accordion 上使用本機 CSS 變數，以增強即時自訂。CSS 變數的值透過 Sass 設定，因此 Sass 自訂仍受支援。
--#{$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-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 變數
$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; // Deprecated in 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-emphasis;
$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 5L8 11L14 5'/></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 5L8 11L14 5'/></svg>");