Bootstrap 5 摺疊面板
基礎可摺疊內容
當您需要隱藏或顯示大量內容時，可摺疊內容很有用。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
示例
<button data-bs-toggle="collapse" data-bs-target="#demo">可摺疊</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</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">
Lorem ipsum dolor text....
</div>
自己動手試一試 »
預設情況下，可摺疊內容是隱藏的。但是，您可以新增 .show 類來預設顯示內容。
手風琴
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
下面的示例透過擴充套件卡片元件展示了一個簡單的手風琴。
注意： 使用 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">
Lorem ipsum..
</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">
Lorem ipsum..
</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">
Lorem ipsum..
</div>
</div>
</div>
</div>
自己動手試一試 »
