ㄧ.折疊-切換內容的可見性

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a href="#collapse-1" data-toggle="collapse">title-1</a>
    </div>
    <div class="collapse" id="collapse-1" data-parent="#accordion">
      <div class="card-body">hello~1</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a href="#collapse-2" data-toggle="collapse">title-2</a>
    </div>
    <div class="collapse" id="collapse-2" data-parent="#accordion">
      <div class="card-body">hello~2</div>
    </div>
  </div>
</div>

#demo.component{
  padding: 50px;
}

重點：
1.手風琴的部分a連結就完全使用卡片的結構，不像上次那樣a連結與內容分開
2.這個功能主要有兩個以上的內容與按鈕，只能看到一個內容之前呼叫過的則隱藏
3.在這個功能當中一定要在.collapse加入 data-parent="#accordion"，否則呼叫一個後在呼叫下一個則兩個內容都看得到
4.父元素加入#accordion，使用data-parent="#accordion"代表為手風琴功能

codepen
參考：bootstrap4