Elements with display: none continue to occupy space in div

Question

Elements with display: none continue to occupy space in div

Navigation

#1 by (0 votes)

0

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 &amp; Noivo" data-lightbox-gallery="gallery1">
          <div class="hover-text">
            <h4>Noiva &amp; Noivo</h4>
          </div>
          <img src="img/portfolio/03-small.jpg" class="img-responsive" alt="Noiva &amp; Noivo"> </a> </div>
      </div>
    </div>

html jquery css front-end

asked by anonymous 02.11.2017 / 15:07

1 answer

Passing values from a class when generating a pdf in JavaFX Optimization of Hybrid Applications

score 0 · Answer 1

I want to believe the problem may be the moment the script runs, you can put your code to hide inside:

$( document ).ready(function() {
   //teu codigo
});

and you can have as an example:

$(document).ready(function(){
$('.testeOne').css("display", "none");
$('.testeTwo').css("display", "none");
  $('#more').click(function(event){
      event.preventDefault();
      $('.testeOne').css("display", "block");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><divclass="col-sm-6 col-md-4 col-lg-4 testeTwo">
      <div class="portfolio-item">
        <div class="hover-bg"> 
        <a href="http://lorempixel.com/400/200" title="Noiva &amp; Noivo" data-lightbox-gallery="gallery1">
          <div class="hover-text">
            <h4>Noiva &amp; Noivo</h4>
          </div>
          <img src="http://lorempixel.com/400/200"class="img-responsive" alt="Noiva &amp; Noivo"> </a> 
          </div>
      </div>
</div>
</div>

<div>
<div class="col-sm-6 col-md-4 col-lg-4 testeOne">
      <div class="portfolio-item">
        <div class="hover-bg"> 
        <a href="http://lorempixel.com/400/200" title="Noiva &amp; Noivo" data-lightbox-gallery="gallery1">
          <div class="hover-text">
            <h4>Outra Noiva &amp; Noivo</h4>
          </div>
          <img src="http://lorempixel.com/400/200"class="img-responsive" alt="Outra Noiva &amp; Noivo"> </a> 
          </div>
      </div>
</div>
</div>


<a href="#" id="more" >More</button>