F2E合作社｜collapse收合區塊｜Bootstrap 5網頁框架開發入門

前言

collapse 是 bootstrap 套件裡的手風琴，開開合合、收收折折，想知道它是怎麼運作的嗎？那就繼續看下去吧。

（ 圖片來源 ）

官方網站的 Collapse 頁面

基本收合區塊

點擊按鈕，透過改變 Class 來顯示及隱藏另一個元素：

• .collapse 隱藏內容。
• .collapsing 會在轉換的過程中被套用。
• .collapse.show 顯示內容。

通常建議使用帶有 data-bs-target 屬性的按鈕，從語義的角度來看，雖然不建議這樣做，但也可以使用帶有 href 屬性（ 和 role ="button" ）的連結，在這兩種情況下，都需要 data-bs-toggle="collapse" 。

使用 <a> 標籤

<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
</a>
<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>

使用 <button> 標籤

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
</button>
<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>

多個目標

<button> 或 <a> 標籤可以用來顯示與隱藏元素，需要在它們的 data-bs-target 或是 href 屬性內部引用選擇器，同一個元素可以被多個 <button> 或 <a> 控制以顯示或隱藏，只要它們都有透過 data-bs-target 或是 href 對其進行引用。

<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
<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>

親和性

確保有在控制元素中添加 aria-expanded ，該屬性明確地向螢幕閱讀器、類似的輔助技術之控制元件傳達可折疊元素的當前狀態，如果可折疊元素預設為關閉，則控制項元素上的屬性值應為 aria-expanded="false" ，如果使用 show 將可折疊元素設置為預設打開，則應在控制項上設置 aria-expanded="true" 。
插件將根據可折疊元素目前的狀態（ 開啟與否 ）自動切換控制項上的這個屬性（ 透過 JavaScript ，或是當使用者觸發了綁定到相同折疊元素的另一個控制項元素 ），如果控制的 HTML 元素不是按鈕（ 例如: <a> 或 <div> ），那麼 role="button" 屬性應該被加到元素中。

如果控制元素鎖定了一個單一的可折疊元素（ 即 data-bs-target 屬性指向的是 id 選擇器 ），則應該在控制元素上添加 aria-controls 屬性，且內部包含了可折疊元素之 id ，現代的螢幕閱讀器、類似的輔助技術都利用此屬性為用戶提供額外的快捷方式以直接導航到可折疊元素。

參考資料

1. Collapse · Bootstrap v5.0
2. 折疊 (Collapse) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
3. Collapse收合區塊-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學