Menu
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.
525
visible: It is used to specify the element to be visible. It is a default value. hidden: Element is not visible, but it affects layout. collapse: It hides the element when it is used on a table row or a cell.
What is the difference between display:none and visibility:hidden style? visibility: hidden hides the element, but it still takes up space in the layout. display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page.
visibility:hidden will keep the element in the page and occupies that space but does not show to the user. display:none will not be available in the page and does not occupy any space. Show activity on this post. It will remove the element from the normal flow of the page, allowing other elements to fill in.
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.
155
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.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
