I am facing an issue with my FAQ page where I have used bootstrap accordion tabs. The problem arises when I place them side by side in a 50/50 split, as when one tab is opened, the adjacent tab also expands without displaying its content.
For example, this is a screenshot of the problem: https://i.sstatic.net/j9beq.png
Below is a snippet of my HTML code:
<div id="faqresult">
<div class="col-md-12 animatedopen">
<div class="vragen-wrapper">
<div class="masonry-header">
<h3 id="betalen">Betalen</h3>
</div>
<div class="masonry-vragen faqcontainer">
<div class="card">
<div class="card-header" id="heading1">
<h5 class="mb-0">
<button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
Welke betalingstermijn hanteren jullie?
<i class="fas fa-chevron-down"></i>
</button>
</h5>
</div>
<div id="collapse1" class="collapse " aria-labelledby="heading1" data-parent="#accordion">
<div class="card-body">
<p>Bij een eerste bestelling dient er vooruit betaald te worden, hierna is eventueel betaling mogelijk op factuur.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<h5 class="mb-0">
<button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
Op welke manieren kan ik betalen?
<i class="fas fa-chevron-down"></i>
</button>
</h5>
</div>
<div id="collapse2" class="collapse " aria-labelledby="heading2" data-parent="#accordion">
<div class="card-body">
<p>De eerste bestelling altijd vooraf, daarna eventueel betaling mogelijk op factuur. Bij een eerste bestelling of betaling vooraf wordt een inschatting gemaakt van de verzendkosten. Deze zullen op basis van nacalculatie nogmaals berekend worden. Voor het verschil in kosten kan eventueel nog een aanvullende factuur volgen.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<h5 class="mb-0">
<button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
Wanneer ontvang ik mijn factuur?
<i class="fas fa-chevron-down"></i>
</button>
</h5>
</div>
<div id="collapse3" class="collapse " aria-labelledby="heading3" data-parent="#accordion">
<div class="card-body">
<p>De factuur ontvang je na levering</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It seems that the issue of adjacent accordions expanding when one is opened might be related to how I have split them. I tried using the following CSS to arrange them in a 50/50 split:
#faqresult{
width:100%;
}
.faqcontainer{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.faqcontainer .card{
flex: 0 0 49.5%;
}
After applying some modifications as suggested below, the first accordion works fine:
https://i.sstatic.net/nPEW4.png
However, the issue persists with the second accordion: