折疊

使用幾個類別和我們的 JavaScript 外掛程式，在您的專案中切換內容的可見性。

運作方式

折疊 JavaScript 外掛程式用於顯示和隱藏內容。按鈕或錨點用作觸發器，對應到您切換的特定元素。折疊元素會將 height 從其目前值動畫到 0。考量到 CSS 處理動畫的方式，您無法在 .collapse 元素上使用 padding。請改用類別作為獨立的包裝元素。

此元件的動畫效果取決於 prefers-reduced-motion 媒體查詢。請參閱我們的無障礙文件中的減少動作區段。

範例

按一下下列按鈕，以透過類別變更顯示和隱藏其他元素

.collapse 隱藏內容
.collapsing 在轉換期間套用
.collapse.show 顯示內容

一般來說，我們建議使用具有 data-target 屬性的按鈕。雖然從語義觀點來看不建議使用，但您也可以使用具有 href 屬性 (以及 role="button") 的連結。在這兩種情況下，都需要 data-toggle="collapse"。

具有 href 的連結

摺疊元件的一些佔位內容。這個面板預設為隱藏，但在使用者啟動相關觸發器時會顯示。

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

水平

摺疊外掛也支援水平摺疊。加入 .width 修改器類別，以轉換 width 而非 height，並在直接子元素上設定 width。您可以自由撰寫自己的自訂 Sass、使用內嵌樣式，或使用我們的寬度工具。

請注意，雖然下列範例設定了 min-height 以避免在我們的文件中有過多的重新繪製，但這並非明確要求。僅需要子元素上的 width。

這是水平摺疊的一些佔位內容。它預設為隱藏，並在觸發時顯示。

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

多個目標

<button> 或 <a> 可以透過在 href 或 data-target 屬性中使用 JQuery 選擇器參照多個元素來顯示和隱藏這些元素。多個 <button> 或 <a> 可以顯示和隱藏一個元素，只要它們各自使用 href 或 data-target 屬性參照它即可

切換第一個元素

這個多重摺疊範例的第一個摺疊元件的一些佔位內容。這個面板預設為隱藏，但在使用者啟動相關觸發器時會顯示。

這個多重摺疊範例的第二個摺疊元件的一些佔位內容。這個面板預設為隱藏，但在使用者啟動相關觸發器時會顯示。

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

手風琴範例

使用卡片元件，您可以延伸預設摺疊行為，以建立手風琴。為了適當地達成手風琴樣式，務必使用 .accordion 作為包裝器。

第一個手風琴面板的某些佔位符內容。由於 .show 類別，此面板預設顯示。

第二個手風琴面板的某些佔位符內容。此面板預設隱藏。

最後，第三個也是最後一個手風琴面板的佔位符內容。此面板預設隱藏。

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

無障礙

務必將 aria-expanded 新增至控制元素。此屬性明確傳達與控制元件相關的可摺疊元素的目前狀態給螢幕閱讀器和類似的輔助技術。如果可摺疊元素預設關閉，控制元素上的屬性應具有 aria-expanded="false" 的值。如果你已設定可摺疊元素預設開啟，使用 show 類別，請改為在控制元件上設定 aria-expanded="true"。外掛程式會根據可摺疊元素是否已開啟或關閉（透過 JavaScript 或因為使用者觸發也與相同可摺疊元素相關聯的另一個控制元素），自動在控制元件上切換此屬性。如果控制元素的 HTML 元素不是按鈕（例如，<a> 或 <div>），應將屬性 role="button" 新增至元素。

如果你的控制元素鎖定單一可摺疊元素，亦即 data-target 屬性指向 id 選擇器，你應將 aria-controls 屬性新增至控制元素，包含可摺疊元素的 id。現代螢幕閱讀器和類似的輔助技術使用此屬性，提供使用者額外的捷徑，直接導航至可摺疊元素本身。

請注意，Bootstrap 的目前實作未涵蓋 ARIA 撰寫實務指南手風琴模式中描述的各種鍵盤互動，你將需要自行使用自訂 JavaScript 納入這些互動。

使用方式

摺疊外掛程式使用一些類別來處理繁重的工作

.collapse 隱藏內容
.collapse.show 顯示內容
當過渡開始時新增 .collapsing，並在結束時移除

這些類別可在 _transitions.scss 中找到。

透過資料屬性

只要將 data-toggle="collapse" 和 data-target 加入元素中，就能自動指定一個或多個可收合元素的控制權。data-target 屬性會接受一個 CSS 選擇器，用來套用收合效果。請務必將 collapse 類別加入可收合元素中。如果您希望它預設為開啟狀態，請加入額外的 show 類別。

若要將類似手風琴的群組管理功能加入可收合區域中，請加入資料屬性 data-parent="#selector"。請參閱示範，以了解實際運作方式。

透過 JavaScript

使用手動啟用

$('.collapse').collapse()

選項

選項可透過資料屬性或 JavaScript 傳遞。對於資料屬性，請將選項名稱附加到 data-，例如 data-parent=""。

名稱	類型	預設值	說明
parent	選擇器 \| jQuery 物件 \| DOM 元素	false	如果提供了 parent，則在顯示此可收合項目時，指定 parent 下的所有可收合元素都會關閉。（類似傳統手風琴行為 - 這取決於 `card` 類別）。此屬性必須設定在目標可收合區域上。
toggle	布林值	true	在呼叫時切換可收合元素

方法

非同步方法和轉場

所有 API 方法都是非同步的，而且會啟動轉場。它們會在轉場啟動後立即傳回呼叫者，但在轉場結束之前。此外，在轉場元件上呼叫方法將會被忽略。

請參閱我們的 JavaScript 文件，以取得更多資訊.

`.collapse(options)`

將您的內容設定為可收合元素。接受一個選用的選項 object。

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

切換可收合元素，顯示或隱藏。在可收合元素實際顯示或隱藏之前傳回呼叫者（即在 shown.bs.collapse 或 hidden.bs.collapse 事件發生之前）。

`.collapse('show')`

顯示可收合元素。在可收合元素實際顯示之前傳回呼叫者（即在 shown.bs.collapse 事件發生之前）。

`.collapse('hide')`

隱藏可收合元素。在可收合元素實際隱藏之前傳回呼叫者（即在 hidden.bs.collapse 事件發生之前）。

`.collapse('dispose')`

銷毀元素的收合。

事件

Bootstrap 的收合類別會公開幾個事件，用於連結收合功能。

事件類型	說明
show.bs.collapse	當呼叫 `show` 實例方法時，此事件會立即觸發。
shown.bs.collapse	當使用者可見的收合元素已完成時，此事件會觸發（會等待 CSS 轉場完成）。
hide.bs.collapse	當呼叫 `hide` 方法時，此事件會立即觸發。
hidden.bs.collapse	當使用者可見的收合元素已隱藏時，此事件會觸發（會等待 CSS 轉場完成）。

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})

折疊

運作方式

範例

水平

多個目標

手風琴範例

可摺疊群組項目 #1

可摺疊群組項目 #2

可摺疊群組項目 #3

無障礙

使用方式

透過資料屬性

透過 JavaScript

選項

方法

非同步方法和轉場

.collapse(options)

.collapse('toggle')

.collapse('show')

.collapse('hide')