0

He estado buscando soluciones en internet pero parece que no encuentro una, tengo en mi pagina una pagina de preguntas frecuentas, la cual usa la propiedad de bootstrap collapse pero me pasa que cuando llamo a la pagina desde mi pagina index, esta no se abre con el collapse que necesito, lo estoy intentando hacerlo con Jquery pero parece que no está funcionando. ¿Habrá alguna forma de hacerlo por favor?

<div class="p-5 col-lg-3">
     <h6>PREGUNTAS FRECUENTES</h6>
           <ul class="list-group">
                    <a href="preguntas-frecuentes.html?#como-enviar-mi-pedido" class="btn-frecuentes" collapse="collapseOne"><li class="list-group-item">¿Cómo enviar mi pedido?</li></a>
                    <a href="preguntas-frecuentes.html?#canales-de-pago" class="btn-frecuentes" collapse="collapseTwo"><li class="list-group-item">¿Cuáles son los canales de pago?</li></a>
                    <a href="preguntas-frecuentes.html?#donde-puedo-llamar" class="btn-frecuentes" collapse="collapseThree"><li class="list-group-item">¿A dónde puedo llamar?</li></a>
                   <a href="preguntas-frecuentes.html?#en-cuanto-tiempo-llega-mi-pedido" class="btn-frecuentes" collapse="collapseFour"><li class="list-group-item">¿En cuánto tiempo llega mi pedido?</li></a>
           </ul>
</div>

Y este el codigo que he intentado para collapsar la sección con Jquery:

$('.btn-frecuentes').click(function(){
    $('.collapse').removeClass('show')
    var collapse = "#" + $(this).attr('collapse');
    $(collapse).addClass('show')
})
2
  • Que version de bootstrap estas usando? el 25 ago. 2020 a las 17:48
  • version Bootstrap 4 el 25 ago. 2020 a las 17:49

1 respuesta 1

0

Sólo estas implementando mal el collapse en sí, fijate que estas redirigiendo a una página html en tu tag a, cuando lo único que necesitas es diferenciar cada collapse por un id

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="p-5 col-lg-3">
  <h6>PREGUNTAS FRECUENTES</h6>
  <ul class="list-group">
    <a class="btn btn-primary" data-toggle="collapse" href="#como-enviar-mi-pedido" role="button" aria-expanded="false" aria-controls="como-enviar-mi-pedido">
    ¿Cómo enviar mi pedido?
    </a>
  </ul>
<div class="collapse" id="como-enviar-mi-pedido">
  <div class="card card-body">
    Explicacion de envio de pedido
  </div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

Ahora, puede ser que necesites redirigir a una página html por lo que te recomendaría usar otra opción como un modal. Ignoro si en un collapse puedes renderizar estilos y cosas así.

Nos comentas si te sirvió ;).

4
  • En el codigo que me mandaste el collapse esta en la misma pagina, y no es lo que necesito en si...yo necesito que cuando de click en mi index que tiene la lista con las preguntas frecuentes..esta vaya a la pagina de preguntas frecuentes y collapse la pregunta al cual el usuario hizo click! el 25 ago. 2020 a las 18:07
  • No entendí esa parte donde escribiste "collapse la pregunta al cual usuario hizo click", entiendo que lo que necesitas es una redirección entonces? el 25 ago. 2020 a las 18:08
  • Me refiero a que, tengo la lista con los enlaces, y estás redirigen a una seccion de la paginas-frecuentes.html que esta fuera del index.html pero cuando le dan click a cualquier tag de la lista de enlaces, se va a la pagina-frecuentes.html pero con la opción collapsada. ¿Me entendiste? el 25 ago. 2020 a las 18:25
  • Coloca esto var hash = window.location.hash; if(hash != '') { $('#' + hash).show(); } dentro de una función que se ejecute cuando se carga el DOM.
    – Triby
    el 26 ago. 2020 a las 1:48

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.