Hiding DOM elements correctly using CSS and jQuery

There are several Ways to ‘Hide’ elements on a page. There has been a deal of confusion among transitioning and beginner web developers as to which to use in different situations.

At the moment 3 recognized techniques to achieve this using CSS using the style properties opacity, display or visibility.
Read on to find out how and when to use them correctly.

opacity:0

The opacity property is of the CSS3 standard, and consequently is not supported by ie8 and other older browsers. However there are fall backs for non-supportive browsers.

This properly allows you to set the transparency of an object with by incrementing decimal values between 0 and 1. Setting the value to 0 will make an object not visible, this however the object will continue to take up space and will be remain interactive.

When an object ‘takes up space’ it means that it wont collapse the document flow. ie. 3 inline divs which are all floated left, setting opacity:0; on the middle div will not cause the first and third to come together, instead there will remain a transparent space between the 2, with dimensions of the transparent div.

#someElement
{
opacity: 0; //css3 compatable browser will use this
-moz-opacity: 0; //older firefox browsers will fall back to this
filter: alpha(opacity=0); //older ie browsers will fall back to this.
}

display:none

The display property will allow you to hide an object, causing it to be removed from the document flow and making them non-clickable
This works best on absolutely positioned elements which are not part of document flow.
It could also be useful for certain liquid/content aware layouts.

#someElement
{
display:none;
}

To reveal the element again we could use one of the following ( other display values w3schoolds Display Property )

#someElement
{
display:inline; //element will be displayed inline
display:block; //element will be displayed in a block
}

visibility:hidden

The visibility property is similar to using opacity:0; except the object is not clickable.
elements with with the style property of visibility set to hidden, will continue to take up space in the document flow

#someElement
{
visibility:hidden;
}

to reveal the element we could use

#someElement
{
visibility:visible;
}

As we can see they are 3 very different techniques with varying implications.

to sum up, using purely CSS we can hide elements in the following ways
-Opacity:0; element continues to take up space when hidden and remains clickable, not supported by all browsers without browser specific synax.
-visibility:hidden; element continues to take up space when hidden but is not clickable
-display:none element does not take up space when hidden and is not clickable

jQuery

Using jQuery we have additional methods to quickly achieve this.
This method will set the css ‘display’ property to ‘none’ – So it the resulting hidden element ‘does not take up space’.


$('#box').hide()  //hides the selected element
$('#box').show() //reveals the selected element

$('#box').hide(1000)  //hides the selected element with a fade animation for 1 second
$('#box').show(1000) //reveals the selected element with a fade animation for 1 second

$('#box').hide(1000, doSomthing)  //hides the selected element with a fade animation for 1 second with an optional callback function

funnction doSomthing()
{
 alert('the animation completed');
}

With jQuery we could also manipulate all the css properties directly

Hiding DOM elements correctly using CSS and jQuery