html - 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 ?