When clicking any of the buttons it effectively expands the information and shows me the info, however, I can contract with the same button, but I would like that when pressing another button the one that is expanded will contract and show me only the information of the button that I just clicked. something similar to what Bootstrap 's Accordion component does . PS: I am using the code with the Bootstrap V. 4.3 template
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<a class="btn btn-primary" data-toggle="collapse" href="#collapseE1" role="button" aria-expanded="false" aria-controls="collapseExample">
Boton 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseE2" role="button" aria-expanded="false" aria-controls="collapseExample2">
Boton 2
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseE3" role="button" aria-expanded="false" aria-controls="collapseExample3">
Boton 2
</a>
<div class="collapse" id="collapseE1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richar
</div>
</div>
<div class="collapse" id="collapseE2">
<div class="card card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delen
</div>
</div>
<div class="collapse" id="collapseE3">
<div class="card card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delen
</div>
</div>
Based on what I understood you can use the following function
JQuery
to do what you ask for:Take into account that the class was used
.btn-primary
to refer to the buttons, once they are given itclick
will search for the divs with the classcollapse
and hide them with thetoggle
.I attach routes
JQuery
for you to add to your solution: https://code.jquery.com/It is a matter of using the following CDN code:
I hope it helps you. Greetings.