I am currently facing a problem with the Bootstrap collapse feature. My objective is to display only one div at a time when clicked, but currently, all three are displayed simultaneously upon clicking. I would like to be able to click on one button and hide the others in case any of them are open. Is there a way to achieve this?
Here is the code snippet I have implemented:
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group btn-group-lg m-auto mt-5" role="group" aria-label="First group">
<button type="button" class="btn active btn-secondary" data-toggle="collapse" data-target="#collapseInformation" aria-expanded="false" aria-controls="collapseInformation"><span class="content">Go one</span></button>
<button type="button" class="btn btn-secondary" data-toggle="collapse" data-target="#collapseCampus" aria-expanded="false" aria-controls="collapseCampus"><span class="content">Go two</span></button>
<button type="button" class="btn btn-secondary" data-toggle="collapse" href="#collapseNearby" role="button" aria-expanded="false" aria-controls="collapseNearby"><span class="content">Go three</span></button>
</div>
</div>
<div id="accordion" role="tablist">
<div class="collapse-information collapse show w-75 m-auto" role="tab" id="collapseInformation">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue laoreet quam, eu convallis tortor condimentum nec. Pellentesque sed felis id ex pellentesque ultrices. Aenean in tempor lorem, eu porta enim. Aliquam erat volutpat. Nulla sit amet congue dolor, id porta urna. Suspendisse vel libero eleifend, accumsan nunc id, vulputate ligula. Nunc eleifend dictum velit, vel euismod augue pretium et.
Proin rhoncus odio eleifend finibus mattis. Morbi purus odio, aliquam non augue quis, viverra iaculis velit. Fusce dictum elit vel venenatis posuere. Donec nisl nibh, semper vel lacus et, facilisis tempor velit. Proin ullamcorper, diam ac lobortis venenatis, lorem lectus dapibus nulla, eget dapibus leo ex ut leo. Suspendisse sed nisl sollicitudin, vulputate ipsum a, commodo tortor. In bibendum placerat nibh non congue. Curabitur condimentum dolor turpis, vel pharetra dui egestas a. Integer consequat accumsan rutrum. Morbi et felis quam. Sed suscipit placerat dolor, nec vulputate dolor. Maecenas porta ex ut arcu mattis, sit amet convallis urna scelerisque.</div>
</div>
<div class="collapse-campus collapse w-75 m-auto" role="tab" id="collapseCampus">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<div class="collapse-nearby collapse w-75 m-auto" role="tab" id="collapseNearby">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
Your assistance in resolving this issue would be highly appreciated.