I'm currently developing an accordion feature, and I've encountered a problem where the arrow on the right side of each collapsed section is not visible, although it's still present. I suspect there might be some styling issues causing this discrepancy. Can someone help me identify where I might be making a mistake?
Below is the code snippet that I'm working with. Please review it carefully.
HTML
<div class="card">
<div class="card-header" id="headingOne">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#nb-accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#nb-accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesc...
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#nb-accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid si...
</div>
</div>
</div>
</div>
SCSS
.nb-accordion {
.card-header {
background: #333;
padding: 0;
border-bottom: 1px solid #3E3E3E;
border-radius: 0 !important;
}
.card {
...
}
.btn {
display:block;
border: 1px solid transparent;
border-radius: 0;
padding: 20px;
width: 100%;
text-align: left;
text-decoration: none;
color: #fff;
&::after {
content: '';
display: inline-block;
background: url(../images/downwards-pointer.svg) no-repeat;
...
}
}
.card-body {
display: block;
padding: 20px;
}
}