Question

What is the difference between element.css('visibility', 'visible') and element.show(). Also, what is the difference between element.css('visibility', 'hidden') and element.hide()?

Update: In addition, what is the most proper way to hide an element and all its elements’ subtree?

Update N2: Which is the proper way to know if an element (and its subtree) is visible: element.is(':visible') or element.css('visibility')?

Update N3: Is there a way to hide an element (completely), but it still will reserve the space/area on the browser page? (as far as I’ve got it – the proper way would be to call hide() but it might lead to the page visual restructuring.

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.