setting visibility vs. hide/show

Question

What is the difference between element.css(\'visibility\', \'visible\') and element.show(). Also, what is the difference between element.css(\'vi

Answer 1

Visibility will still reserve the space in your Browser.

A hidden element is set to display: none thus all space occupied by this element collapses. If you only set the element to visibility: hidden the element will just go transparent but the space is occupied as if the element is still there.

.hide() is equal to .css('display', 'none')
.show() is equal to .css('display', 'block') - I'm pretty sure jQuery does some magic here to decide if it's really block that should go in there but it's somewhat equal.

@Update:
Once you hide an element with .hide() (or .css('display', 'none')) all elements down the dom-tree that are children of that element will be hidden too.

@Update 2:
If you are using .hide() and .show() it's .is(':visible') If you are using the visibility css attribute then .css('visibility')

@Update 3:
That's exactly what .css('visibility', 'hidden') does, it hides the element without the page restructuring. .hide() will completely "remove" the element.