21.Bootstrap(中文教程)元件：折叠：手风琴

ㄧ.折叠-切换内容的可见性

<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