Keep height of auto height DIV when content gets hidden

Question

I have a div with auto height and and image in it. When I click to get the image hidden, the div container should stay at its height. I know I could achieve this with a fixed height div, but because there are several divs / images with various heights, I can't do it that way.

https://jsfiddle.net/t6w3fkg8/

$(".content").click(function(){
"use strict";
$(this).hide();

});

Answer 1

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

You probably are using display:none at the moment. Try with visibility:hiddeninstead.

Edit: I updated your Fiddle with visibility:hidden: https://jsfiddle.net/xhmp8wj7/1/