CODEWITHSUNDEEP
csshtmlhidden
Freesnöw
Freesnöw

Reputation: 32143

Hiding an element while also backing up the layout

I have a script (JS) running that will be making some different divs either visible or hidden. The problem I am having is that, even though the elements have a 'visibility' property of 'hidden', they still take up space. Is there a way I can hid the elements while also preventing them from taking up space?

I have access to jQuery as well, if that means anything...

Cheers,

DalexL

Upvotes: 0

Views: 73

Answers (4)

Purag
Purag

Reputation: 17061

You could either us jQuery's hide() function:

$("#sample").hide();

If you wanted to hide multiple divs, just add a class to all of them, and hide the entire class:

$(".sample").hide();

You could also use javascript like so:

function hidedivs() {
document.getElementById('sample').style.display='none';
}

But with that, you'd have to make one for each element. I'd recommend the above jquery.

More about hide() here: http://api.jquery.com/hide

Upvotes: 1

lunixbochs
lunixbochs

Reputation: 22415

Try using display: none; instead of visibility: hidden;

JQuery's .hide() method does this as well. You can display again using simply .show()

Upvotes: 1

Andrew
Andrew

Reputation: 13853

You are looking for display none,

.hide {
    display: none;
}

Upvotes: 2

Ibu
Ibu

Reputation: 43810

Use the display: none css property

when you use visibility :hidden the hidden element still occupies its height and width. While display property make the element completely collapse.

Upvotes: 1

Related Questions