Bootstrap 5 折疊

基礎的折疊

當您想要隱藏和顯示大量內容時，可折疊組件非常有用：

實例

<button data-bs-toggle="collapse" data-bs-target="#demo">春日</button>
<div id="demo" class="collapse">
  <p>勝日尋芳泗水濱，無邊光景一時新。</p>
  <p>等閑識得東風面，萬紫千紅總是春。</p>
</div>

親自試一試

例子解釋

.collapse 類指示可折疊元素（在我們的例子中為 <div>）；通過單擊按鈕，可顯示或隱藏的內容。

如需控制（顯示/隱藏）可折疊內容，請將 data-bs-toggle="collapse" 屬性添加到 <a> 或 <button> 元素。然后添加 data-bs-target="#id" 屬性來連接按鈕和可折疊內容（<div id="demo">）。

注釋：對于 <a> 元素，您可以使用 href 屬性代替 data-bs-target 屬性：

實例

<a href="#demo" data-bs-toggle="collapse">春日</a>
<div id="demo" class="collapse">
  <p>勝日尋芳泗水濱，無邊光景一時新。</p>
  <p>等閑識得東風面，萬紫千紅總是春。</p>
</div>

親自試一試

默認情況下，可折疊內容是隱藏的。但是，您可以添加 .show 類來默認顯示內容：

實例

<div id="demo" class="collapse show">
  <p>勝日尋芳泗水濱，無邊光景一時新。</p>
  <p>等閑識得東風面，萬紫千紅總是春。</p>
</div>

親自試一試

Accordion（手風琴）

下例通過對 card 組件進行擴展，顯示一個簡單的手風琴。

注釋：使用 data-bs-parent 屬性確保當顯示可折疊項目之一時，會關閉指定父項下的所有可折疊元素。

實例

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        可折疊組項目 #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>春日</h3>
        <p>勝日尋芳泗水濱，無邊光景一時新。</p>
        <p>等閑識得東風面，萬紫千紅總是春。</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        可折疊組項目 #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>初夏絕句</h3>
        <p>紛紛紅紫已成塵，布谷聲中夏令新。</p>
        <p>夾路桑麻行不盡，始知身是太平人。</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        可折疊組項目 #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>山行</h3>
        <p>遠上寒山石徑斜，白云生處有人家。</p>
        <p>停車坐愛楓林晚，霜葉紅于二月花。</p>
      </div>
    </div>
  </div>
</div>

親自試一試