Hide div but keep the empty space
Try:
$(".description").css("visibility", "hidden")
hide()
is the equivalent to: $(".description").css("display", "none");
Which does not reserve the space the element was taking.
Hidden
makes the element invisible, but stills reserves the space.
It's important to note that dfsq's example using Opacity:0 will still allow the contents to be selected, copy/pasted, etc., although there is no visible text-highlighting when selecting.
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.
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