There are 2 method in css where you can make a div invisible. Its important to know how to hide a div or any given container dynamically, to improve the user interactions in modern web sites.

1. Using Display Attribute in CSS
2. Using Visibility Attribute in CSS

Invisible div can be created by setting the display attribute in css to none. In the following example div which has a id named divId will be set to invisible. Important thing here is after hiding, the div stays in the web page but no space is taken from the web page. You can make the div visible whenever needed by setting the display attribute to block.

#divId {
display:none;
}

Demo Display Attribute

Another method of creating Invisible div is to set the visibility attribute in css to hidden. In the following example div which has a id named divId will be set to invisible. Important thing here is after hiding, the div stays in the web page and space will be taken from the web page. So in this situation even though you hide the div, area contained by the div will be shown as blank. You can make the div visible whenever needed by setting the visibility attribute to visible.

#divId {
visibility:hidden;
}

Demo Visibility Attribute

Jquery provides simple built in method to hide any element in the document. You can make the div invisible by using the hide() method. This method is simply equivalent to setting the css display attribute to none. Important thing in this function is that we can animate the div when hiding. Also you can make the div visible again by calling the show() method. Following examples shows how to use the hide() method.

This will hide the div without any animation effects on the div.

$('#divId').hide();

Demo Jquery Hide

This method will animate the div when hiding. You can pass slow,pass or valid number to animate. Value of fast is 200 milliseconds and slow is 600 milliseconds.

$('#divId').hide('slow');

Demo Jquery Hide Animate

Download Code