Bootstrap_Collapse & Accordion折疊語法

本文总阅读量次

什麼是Collapse折疊？

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

1
2
3
4
5

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

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

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

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

Accordion隱藏折疊資料

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<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>

實作成果