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

Taken from w3schools.com:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:

Answer 2

jquery.hide() is equivalent to calling .css('display', 'none') and and jquery.show is equivalent to calling .css('display', 'block')

The .css() method is just setting the visibility property.

From the css point of view difference :

visbility : hidden

The value hidden makes the generated boxes invisible without removing them from the layout. Descendant boxes can be made visible. See this

display : none

A value of none makes the element generate no box at all. Descendant boxes cannot generate boxes either, even if their display property is set to something other than none.See this

With hidden the element is still generated.

Answer 3

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.

Answer 4

In addition to bardiir's explanation here is good demo of "display:none" and "visibility:hidden" http://www.w3schools.com/css/css_display_visibility.asp

"remove" button sets "display:none" and "hide" button sets "visibility:hidden".

Answer 5

They are setting 2 different css properties: hide/show sets the display property to none, show removes this setting so that the default is used (e.g. 'block' for a div).

The difference as the other answers point out is that calling hide on an element means that it (and all its ancestors) will not take up any space. Where as setting visibility to hidden will effectively just make the elements completely transparent (but still take up space).

For answers to your edits:

1. Hide all ancestor (this is automatically done with both methods).
2. Use element.is(':visible') since this performs a check on both the visibility and display properties and to see if the height and width aren't 0, it also performs it recursively on the ancestors, whereas element.css('visibility') just tells you the visibility of the element.
3. Setting element.css('visibility', 'hidden') will do this - not calling element.hide().