Menu
Is there any difference between
jQuery('#id').show() and jQuery('#id').css("display","block") and
jQuery('#id').hide() and jQuery('#id').css("display","none") 
237
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). ... visibility:hidden means that unlike display:none , the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.
jQuery hide() Method The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.
opacity:0 will still allow click, hover, and other mouse events on the element. It just won't be visible to the user. display:none does what it implies—the element still exists but is completely not visible, as though it's width and height are 0.
display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.
jQuery('#id').css("display","block")
The display property can have many possible values, among which are block, inline, inline-block, and many more.
The .show() method doesn't set it necessarily to block, but rather resets it to what you defined it (if at all).
In the jQuery source code, you can see how they're setting the display property to "" (an empty string) to check what it was before any jQuery manipulation: little link.
On the other hand, hiding is done via display: none;, so you can consider .hide() and .css("display", "none") equivalent to some point.
It's recommended to use .show() and .hide() anyway to avoid any gotcha's (plus, they're shorter).
106
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
