Hide div but keep the empty space

Question

I have the following div element:

.description {    color: #b4afaf;    font-size: 10px;    font-weight: normal;  }

<div class="description">Some text here</div>

Then I have a click function on an element to hide the above div:

$('#target').click(function(){   $(".description").hide(); }); 

When I hide the div, it collapses and stops taking up space. This messes up the layout of my page.

Is there a way to hide the div, but still maintain the space it was taking before? I don't want to change the font color because it would be still selectable.

Answer 1

Use visibility css property for this

visibility:

The visibility property specifies whether the boxes generated by an element are rendered.

$(".description").css('visibility', 'hidden'); 

Demo: Fiddle

Answer 2

And another option for the sake of completeness. Toggle opacity:

$(".description").css('opacity', 0); // hide $(".description").css('opacity', 1); // show 

http://jsfiddle.net/KPqwt/

However using visibility is prefered for this task.