6

quizá sea lo más fácil del mundo pero no doy con la clave. Estoy empezando con JQUERY y hay cosas que no pillo. Tengo un div con #comentarios y quiero que al hacer click en un boton desaparezca/aparezca. Si quiero cambiar cualquier propiedad css no tengo problema, pero al usar .hide() o .css('display','none') no funciona. Imaginemos que este es div:

$(document).ready(function(){
    $('#cambiar').on("click",function(){
        $('#comentarios').hide();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button id="cambiar" class="btn btn-sm btn-primary ml-5 text-uppercase float-left">comentarios</button>
<div id="comentarios" class="comentarios row col-12 d-flex flex-row align-items-center">

            <div class="comentario row col-12">
                <div class="asociado col-3">
                    <img src="img/avatares/carnetbyw.jpg" alt="" class="col-10 rounded-circle">
                </div>
                <div class="col-9">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
                </div>
            </div>

            <div class="comentario row col-12">
                <div class="asociado col-3">
                    <img src="img/avatares/carnetbyw.jpg" alt="" class="col-10 rounded-circle">
                </div>
                <div class="col-9">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
                </div>
            </div>
        </div>

Muchas gracias

8
  • 6
    Usa $('#comentarios').slideToggle(); que hace animación!
    – Roy Bogado
    el 4 dic. 2019 a las 8:53
  • 3
    Lo que dice Roy debería funcionar. Solo agregar que, en mi caso particular, siempre he trabajado con Hide() y Show() en JQuery a la de ocultar o mostrar objetos de formularios, nunca con DIV; por ejemplo $("#txtEjemplo").Show(); / $("#txtEjemplo").Hide();
    – sgrojillo
    el 4 dic. 2019 a las 9:04
  • 7
    Efectivamente, lo que te está provocando la imposibilidad de poder ocultar el elemento es la clase .d-flex. Inspeccionando el elemento se ve que esta clase posee la regla display: flex !important;. La función hide() de JQuery lo que hace es darle al elemento un display: none en línea, por lo que la propiedad con el !important predomina por encima de esta, ocasionando que no puedas cambiar el display del elemento. Una solución sería quitarle esta clase y darle al elemento la tuya propia con un display: flex de esa manera la función hide() si que podría alterar el display.
    – phpMyGuel
    el 4 dic. 2019 a las 10:10
  • 3
    A mi me funciona el code snippet sin problemas. Con hide() oculta el div y no lo vuelve a mostrar porque no es su finalidad. Si quieres mostrar/ocultar entonces tienes que usar $('#comentarios').slideToggle(); como bien indica @Roy (hice una prueba y muestra/oculta tal cual esperas). Si usas otra librería tendrías que ponerla en el code snippet de tu pregunta para que podamos probar.
    – A. Cedano
    el 4 dic. 2019 a las 10:12
  • 5
    Bien visto @phpMyGuel, de hecho, si se le quita la clase d-flex funciona. Para mi es chocante que una librería del prestigio de Bootstrap haga uso de !important, cuando es un uso desaconsejado, precisamente por situaciones como estas.
    – A. Cedano
    el 4 dic. 2019 a las 10:30

1 respuesta 1

3

Creo que si ya estás utilizando bootstrap puedes recurrir a sus propio css y js para no enturbiar tu código y tirar de nuevos desarrollos para cosas en las que el framework se te quede corto o directamente no permita. Lo que quieres hacer en este caso con el botón es un toogle clarísimo, aspecto que resuelve bootstrap de manera más que eficiente con la clase css y desarrollo js "collapse", te dejo tanto el enlace a la documentación como un ejemplo que ellos mismo dan:

enlace a documentación de bootstrap - collapse

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>

</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
1
  • Genial @JorgeGuz, muchas gracias! el 5 dic. 2019 a las 12:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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