Encountering an issue with the accordion on my website - only the first item opens. The culprit is not the data-target.
If I disable CSS in my code, everything works fine... Upon further investigation, I discovered that the problem lies with the Z-INDEX property.
I intentionally position each collapsible element behind the previous one to create a layered effect, making them un-clickable. This design choice is necessary because of the rounded bottom borders on each card:
https://jsfiddle.net/81co7502/
<section class="mobileSection">
<section id="aboutMobile">
<header class="hamNav">
<div class="container-fluid accordionRow">
<div class="row ">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 colsAccordion">
<div class="accordion" id="accordionExample">
<div class="card" id="historyCard">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
History
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Description of history section...
</div>
</div>
</div>
(additional card sections...)
</div>
</div>
</div>
</div>
</header>
</section>
(Note: In the fiddle, the cards appear rectangular, but they should have rounded bottoms in actual code).
.hamNav {
margin-top: 50px;
}
#headingOne {
}
.card{
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
border:none;
}
(CSS styling for individual cards...)
Is there an alternate method to achieve the desired outcome (hide top of subsequent element) without relying on z-index?