I'm trying to figure out why my bootstrap accordions won't collapse when another has been opened. I coded it two separate way based on other stackoverflow examples I've seen, as well as bootstrap's docs and I still can't figure out why it's not functioning properly. Bootstrap JS is 3.3.7
The idea is that despite whatever <a class="button collapsed"> is clicked, only that content is displayed, the rest should hide.
Example 1 uses separate panel groups
<div data-quickedit-entity-id="paragraph/84" class="panel-group" id="accordion-84" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-abc">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-1" aria-expanded="false" aria-controls="abc-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-2" aria-expanded="false" aria-controls="abc-2">btn2
</a>
</div>
</div>
</div>
<div id="abc-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
test2
</div>
</div>
<div id="abc-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
test3
</div>
</div>
</div>
</div>
<div data-quickedit-entity-id="paragraph/87" class="panel-group" id="accordion-87" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-def">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-1" aria-expanded="false" aria-controls="def-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-2" aria-expanded="false" aria-controls="def-2">btn2
</a>
</div>
</div>
</div>
<div id="def-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def">
<div class="panel-body">
test
</div>
</div>
<div id="def-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def">
<div class="panel-body">
test2
</div>
</div>
</div>
</div>
Example 2 uses the same panel-group
<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-tes">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
</a>
</div>
</div>
</div>
<div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test1</p>
</div>
</div>
<div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test2</p>
</div>
</div>
</div>
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-test2">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
</a>
</div>
</div>
</div>
<div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test21</p>
</div>
</div>
<div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test23</p>
</div>
</div>
</div>
</div>
The code below should work as you would expect.
I think the reason it wasn't working before is because you didn't have the id selector in the "data-parent" attribute.
<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-tes">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
</a>
</div>
</div>
</div>
<div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test1</p>
</div>
</div>
<div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test2</p>
</div>
</div>
</div>
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-test2">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
</a>
</div>
</div>
</div>
<div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test21</p>
</div>
</div>
<div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test23</p>
</div>
</div>
</div>
</div>