Estoy trabajando con Bootstrap5 y Vue 3 . Tengo varios buttons y cada uno de ellos desencadena un collapse .
Lo que quiero es que si abro un colapso, todos los demás colapsos deben cerrarse. Pero ahora se mostrarán todos los colapsos y los demás no se cierran.
Intenté usar data-parent y data-bs-parent pero nada de esto funciona.
¿Cómo puedo lograr eso? ¡Gracias!
<div class="row margin-top"> <div class="col"> <div class="d-grid gap-2"> <button type="button" class="btn color-success" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1" data-bs-parent="#myGroup"> Button 1 </button> </div> </div> <div class="col"> <div class="d-grid gap-2"> <button type="button" class="btn color-primary" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2" data-bs-parent="#myGroup"> Button 2 </button> </div> </div> </div> <div> <div class="collapse" id="collapse-b1"> <div class="mt-3"> Text 1 </div> </div> <div class="collapse" id="collapse-b2"> <div class="mt-3"> Text 2 </div> </div> </div>Algunos cambios menores para que funcione
Su código requiere algunas correcciones menores para funcionar correctamente. Agregue el atributo data-bs-parent="#myGroup" a cada colapso. Y luego asigne la misma identificación al elemento principal de los elementos plegables , es decir, el contenedor.
Tenga en cuenta que el nombre del atributo se cambió de data-parent en Bootstrap 4 a data-bs-parent en Bootstrap 5. Y el padre es el elemento que contiene los elementos contraíbles y NO el contenedor de los botones y enlaces que se usan para alternar.
Además, los botones deben tener aplicadas las clases correctas, por ejemplo, btn-primary y btn-success .
Pregunta SO relacionada: Contraer otras secciones cuando una está expandida
Ejecute el fragmento para ver cómo funciona:
<div class="row margin-top"> <div class="col"> <div class="d-grid gap-2"> <button type="button" class="btn btn-success" style="height: auto;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1"> Button 1 </button> </div> </div> <div class="col"> <div class="d-grid gap-2"> <button type="button" class="btn btn-primary" style="height: auto;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2"> Button 2 </button> </div> </div> </div> <div id="myGroup"> <!-- Add the parent id here --> <div class="collapse" id="collapse-b1" data-bs-parent="#myGroup"> <div class="alert alert-success mt-3"> Text 1 </div> </div> <div class="collapse" id="collapse-b2" data-bs-parent="#myGroup"> <div class="alert alert-primary mt-3"> Text 2 </div> </div> </div> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>