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
$('#comentarios').slideToggle();
que hace animación!.d-flex
. Inspeccionando el elemento se ve que esta clase posee la regladisplay: flex !important;
. La funciónhide()
de JQuery lo que hace es darle al elemento undisplay: none
en línea, por lo que la propiedad con el!important
predomina por encima de esta, ocasionando que no puedas cambiar eldisplay
del elemento. Una solución sería quitarle esta clase y darle al elemento la tuya propia con undisplay: flex
de esa manera la funciónhide()
si que podría alterar eldisplay
.hide()
oculta eldiv
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.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.