I implemented accordions based on the code in this example. My goal is to allow users to open multiple accordions simultaneously.
Currently, when one accordion is open and another is clicked, the first one closes. I want them all to remain open, while still giving users the option to collapse or expand as they wish. Is this achievable?
I came across a similar question, but it doesn't quite address my specific scenario.
If you are unable to access the example link, here is the code snippet:
CSS:
[data-toggle="collapse"]:after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f054";
transform: rotate(90deg);
transition: all linear 0.25s;
float: right;
}
[data-toggle="collapse"].collapsed:after {
transform: rotate(0deg);
}
HTML:
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
</div>
</div>
</div>