## **官方示例** https://v4.bootcss.com/docs/components/collapse/ ## **示例：** ``` <div class="sl3_top"> <p> <a class="btn btn-primary" data-toggle="collapse" href="#searchList1" role="button" aria-expanded="false" aria-controls="searchList1"> 產品類型 <span class="iconfont icon-shangjiantou"></span> </a> <a class="btn btn-primary" data-toggle="collapse" href="#searchList2" role="button" aria-expanded="false" aria-controls="searchList2"> 應用 <span class="iconfont icon-shangjiantou"></span> </a> </p> <div class="row" style="margin-top: 5px;"> <div class="col col-md-6"> <div class="collapse multi-collapse" id="searchList1"> <div class="card card-body"> <div class="check_list"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="searchListItem1"> <label class="form-check-label" for="searchListItem1"> ELISA Kit </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="searchListItem2"> <label class="form-check-label" for="searchListItem2"> Polyclonal Antibody </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Protein </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Protein </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Protein </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Protein </label> </div> </div> <div class="clear_sure"> <p>全部清除</p> <button class="sure">確定</button> </div> </div> </div> </div> </div> <div class="row" style="margin-top: 5px;"> <div class="col col-md-6"> <div class="collapse multi-collapse" id="searchList2"> <div class="card card-body"> <div class="check_list"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> </div> <div class="clear_sure"> <p>全部清除</p> <button class="sure">確定</button> </div> </div> </div> </div> </div> </div> ``` ## **事件：** ``` // 當對用戶隱藏折疊元素時觸發此事件(將等待CSS轉換完成) $('#myCollapsible').on('hidden.bs.collapse', function () { // do something... }) // 此事件在調用隱藏方法時立即觸發。 $('#myCollapsible').on('hide.bs.collapse', function () { // do something... }) // 當用戶可以看到折疊元素時觸發此事件(將等待CSS轉換完成)。 $('#myCollapsible').on('shown.bs.collapse', function () { // do something... }) // 此事件在調用show實例方法時立即觸發 $('#myCollapsible').on('show.bs.collapse', function () { // do something... }) ```