首页 > 解决方案 > CSS for toggle collapse

问题描述

I'm trying to have a callopsable div which is collapsed by default, and inside I display the font awesome arrow " > " (because answer is collapsed), then if I click, I'll show the div, and my " > " should be replaced by " v " (because answer is displayed)

But it's not working fine :

.card .card-header[data-toggle="collapse"] {
  text-decoration: none;
  position: relative;
  padding: 0.75rem 3.25rem 0.75rem 1.25rem;
}
.card .card-header[data-toggle="collapse"]::after {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 1.725rem;
  line-height: 51px;
  font-weight: 900;
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  color: #d1d3e2;
}
.card .card-header[data-toggle="collapse"].collapsed {
  border-radius: 0.35rem;
}

.card .card-header[data-toggle="collapse"].collapsed::after {
  content: '\f105';
}
<div class="card shadow mb-4">  <!-- Card Header - Accordion -->
  
  <a href="#collapseQuestionCard_1" class="d-block card-header py-3" 
      data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseQuestionCard_1">
    <h6 class="m-0 font-weight-bold text-primary">Question .... ?</h6>
  </a>
  <!-- Card Content - Collapse -->
  <div class="collapse" id="collapseQuestionCard_1">
    <div class="card-body">
       Answer...
    </div>
  </div>
</div>

Do you have an idea please ?

标签: htmlcsstwitter-bootstrap

解决方案


推荐阅读