[Bootstrap] Collapse折疊語法(含Accordion)

tags: Bootstrap

什麼是Collapse折疊？

使特定的頁面區塊隱藏起來，當點擊某些按鈕或者動作時，資料才會顯現出來。

概念

<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

1. 按鈕上一定要有 data-toggle="collapse" 這個宣告詞，然後需要顯示的資訊在 data-target="#demo" 的連結上。

2. 再利用 div 或者是其他區塊類的元素，增加 id="demo"，重要的是 demo 跟 button 的 data-target 命名必須相同才可運作。

3. 預設的折疊效果是隱藏的，點擊才會出現，若要設定為展開開狀態，在collapse後方添加show便可顯現。

 <div id="demo" class="collapse show">
  <div class="card-body">
   Lorem ipsum dolor.....
  </div>
 </div>

---

使用accordion區塊方式隱藏折疊資料

透過 accordion 的方法來處理時，看起來所有的連結會比較整齊，很多 FAQ 問答頁面也都使用這種模式。

概念

大致與上述collapse基本概念相同，可使用Card卡片元件，展開預設的折疊行為。

<div id="accordion" >
 <div class="card">
 
  <div class="card-header">
    <h5 class="mb-0">
     <div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
      <i class="fas fa-chevron-circle-down"></i> Good Deal</div>
    </h5>
  </div>
  
    <div id="collapse1" class="collapse show">
     <div class="card-body">
     Lorem ipsum dolor, sit amet consectetur adipisicing elit... 
     </div>
    </div>      
  </div> 
 </div>
</div>