Hide div but keep the empty space
JqueryCssHtmlHideJquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
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
Solution 2 - Jquery
And another option for the sake of completeness. Toggle opacity
:
$(".description").css('opacity', 0); // hide
$(".description").css('opacity', 1); // show
However using visibility
is prefered for this task.
Solution 3 - Jquery
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.
Solution 4 - Jquery
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.
Solution 5 - Jquery
you can wrap another div around the outside of it, and probably tell it a specific height to occupy. that way your inner div can show and hide and fadeOut, etc, and the outer div will hold down the real-estate on the page.
Solution 6 - Jquery
There are many ways to do that in CSS.
- visibility: hidden; // best
- transform: scale(0);
- z-index: -999999; // not work with specific positioning
- opacity: 0; // worse, because click and input events still work