I have a set of elements in which I put a class to leave as display: none and display only when you click a button. However, the elements are still occupying the space in the div even though they are invisible, it is as if they were visibility: hidden instead of display: none. What could be happening?
The script to hide and display:
$('.testeOne').css("display", "none");
$('.testeTwo').css("display", "none");
$('#more').click(function(event){
event.preventDefault();
$('.testeOne').css("display", "");
});
A div:
<div class="col-sm-6 col-md-4 col-lg-4 testeTwo">
<div class="portfolio-item">
<div class="hover-bg"> <a href="img/portfolio/03-large.jpg" title="Noiva & Noivo" data-lightbox-gallery="gallery1">
<div class="hover-text">
<h4>Noiva & Noivo</h4>
</div>
<img src="img/portfolio/03-small.jpg" class="img-responsive" alt="Noiva & Noivo"> </a> </div>
</div>
</div>