It may be the easiest thing in the world but I can't find the key. I'm starting with JQUERY and there are things I don't get. I have a div with #comments and I want it to disappear/appear when clicking on a button. If I want to change any css property I have no problem, but using .hide() or .css('display','none') doesn't work. Let's imagine this is 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>
Thank you very much
I think that if you are already using bootstrap you can resort to your own css and js to not cloud your code and pull new developments for things that the framework falls short of or directly does not allow. What you want to do in this case with the button is a very clear toogle, an aspect that bootstrap solves more than efficiently with the css class and "collapse" js development, I leave you both the link to the documentation and an example that they themselves give :
link to bootstrap documentation - collapse