1

Al momento de pinchar cualquiera de los botones efectivamente expande la información y me muestra la info, sin embargo, puedo contraer con el mismo botón, pero, quisiera que al presionar otro botón me contraiga el que está expandido y me muestre solo la info del botón que acabo de pinchar. algo similar a lo que hace el componente Accordion de Bootstrap. PD: El codigo lo estoy utilixando con la plantilla de Bootstrap V. 4.3

<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>

0

1 respuesta 1

2

En base a lo que entendí puedes utilizar la siguiente función en JQuery para realizar lo que pides:

$('.btn-primary').on('click', function () {
    $('.collapse').collapse('hide');
});
<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 3
          </a>


<div class="collapse" id="collapseE1">
  <div class="card card-body">
    1Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richar
  </div>
</div>
<div class="collapse" id="collapseE2">
  <div class="card card-body">
    2Lorem ipsum dolor sit amet consectetur adipisicing elit. Delen
  </div>
</div>
<div class="collapse" id="collapseE3">
  <div class="card card-body">
    3Lorem ipsum dolor sit amet consectetur adipisicing elit. Delen
  </div>
</div>

Toma en cuenta que se utilizó la clase .btn-primary para hacer referencia a los botones, una vez se les da click buscará los divs con la clase collapse y los ocultará con el toggle.

Te anexo rutas de JQuery para que lo agregues a tu solución: https://code.jquery.com/

Es cuestión de usar el siguiente código CDN:

<script
  src="https://code.jquery.com/jquery-3.4.0.min.js"
  integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
  crossorigin="anonymous"></script>

Espero te ayude. Saludos.

3
  • Pero al pasar el script $('.btn-primary').on('click', function () { $('.collapse').collapse('hide'); }); a mi codigo no funciona. Sabes por qué? Commented el 16 abr. 2019 a las 22:44
  • 1
    toma en cuenta que debes contar con la librería de JQuery como el que se muestra en el código, ejemplo: "<script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/…>" Commented el 16 abr. 2019 a las 22:54
  • Modifiqué mi respuesta, agregué la ruta a JQuery por si te interesa, pero es cuestión de agregar el "<script>" que coloqué a tu solución. Commented el 16 abr. 2019 a las 23:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.