Billy Billy - 1 month ago 17
CSS Question

Removing 'white-space' of hidden images

I have a list of images that I would like to hide/show based on which

element is clicked. I have been able to do this successfully, however, there is still the white space below/above the image that is showing. Here is the code I am currently using:


<div class="img-container">
<img id="img1" src="img/image1.jpg" />
<img id="img2" src="img/image2.jpg" />
<img id="img3" src="img/image3.jpg" />


text-align: center;
visibility: hidden;
margin-top: 20px;


var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var img3 = document.getElementById('img3');

("li:nth-child(2)").on('click', function() { = 'visible'; = 'hidden'; = 'hidden';
("li:nth-child(3)").on('click', function(){ = 'visible'; = 'hidden'; = 'hidden';
("li:last-child").on('click', function() { = 'visible'; = 'hidden'; = 'hidden';

I have tried playing around with the
display: hidden
css property paired with
but cannot seem to quite get it working correctly. I have tried searching for this but cannot find anything on removing the white space the hidden image is holding. Am relatively new to JS/jQuery. Thanks.


You could use the css property display and values none and block. The display property specifies if/how an element is displayed.

replace for visible img: = 'visible';


$("#img1").css("display", "block");

And replace for invisible img: = 'hidden';


$("#img1").css("display", "none");

Could use more useful inline-block instead block for lists.