24

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.

BreakPhreak
  • 10,940
  • 26
  • 72
  • 108
  • 2
    If an element is hidden (in whatever way), all its descendants are hidden as well. Also, from the `.hide()` documentation: *"This is roughly equivalent to calling `.css('display', 'none')`[...]"*. – Felix Kling Jan 10 '12 at 09:39
  • 1
    Related: [What is the difference between visibility:hidden and display:none](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) – Shadow The GPT Wizard Jan 10 '12 at 09:42
  • Your question contains three questions, of which, I'm sure, some have already been answered. – Felix Kling Jan 10 '12 at 09:56

5 Answers5

22

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.

bardiir
  • 14,556
  • 9
  • 41
  • 66
  • Just an addendum: as far as I've played with it `visibility: hidden` is not recursive, i.e. only the element (but not the entire subtree) will be hidden. – BreakPhreak Jan 10 '12 at 09:58
  • 1
    Another addendum: in case of `visibility: hidden`, `is(':visible')` will still return `true`. – BreakPhreak Jan 10 '12 at 10:01
3

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.

gideon
  • 19,329
  • 11
  • 72
  • 113
2

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:

Pang
  • 9,564
  • 146
  • 81
  • 122
Orentet
  • 2,353
  • 1
  • 17
  • 28
1

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".

humkins
  • 9,635
  • 11
  • 57
  • 75
1

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().
Mark Rhodes
  • 10,049
  • 4
  • 48
  • 51