bootstrap collapse切换改变图标

原文

<p>
  <span class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </span>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    测试测试
  </div>
</div>

第一步 class加入text-toogle

<span class="btn btn-primary text-toogle" data-toggle="collapse" href="#collapseExample" role="button"  aria-expanded="false" aria-controls="collapseExample">
     <span class="text-collapsed">▲</span><!--class名称text-collapsed-->
     <span class="text-expanded">▼</span><!--class名称text-expanded-->
 </span>

第二步css

.text-toogle[aria-expanded=false] .text-expanded {
  display: none;
}
.text-toogle[aria-expanded=true] .text-collapsed {
  display: none;
}