• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

139
Vistas
¿Cómo muestra solo un elemento plegable a la vez?

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>
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda