Todo está en el título. Básicamente, estoy trabajando con el primer ejemplo de esta página de Bootstrap . No hay ningún ejemplo en esta página que muestre cómo colapsar otros elementos cuando hace clic y expande un elemento diferente. Básicamente, quiero que esto funcione de manera similar a un acordeón , cuando haces clic en otro elemento, el que tenías abierto se oculta (cierra) y el que hiciste clic se expande. Por favor, ayúdenme con esto. Realmente estoy tratando de resolver esto, pero estoy luchando. Aquí hay un código de demostración de Bootstrap 5. ¿Cómo obtendría esto para que estos sean dos elementos únicos con contenido único, y cuando hace clic en uno, se expande y el otro que está abierto se cierra? Muchas gracias por su ayuda - Código de demostración a continuación - El enlace a este ejemplo se adjunta arriba. Estos dos botones tienen contenido único, pero ambos se pueden abrir al mismo tiempo; no quiero esto, solo quiero que uno se abra a la vez y el otro se cierre al hacer clic. Gracias - Cualquier solución es apreciada
<p> <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> </div>Envuelva su colapso en un div con id. Y use el atributo de destino de datos con la identificación principal.
<div id="abc"> <p> <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1" >Toggle first element</a > <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2" > Toggle second element </button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1" data-bs-parent="#abc" > <div class="card card-body"> Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2" data-bs-parent="#abc" > <div class="card card-body"> Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> </div> </div>