82

Is there any difference between

jQuery('#id').show() and jQuery('#id').css("display","block")

and

jQuery('#id').hide() and jQuery('#id').css("display","none")
0

7 Answers 7

97

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

1
  • 3
    Due to the comprehensive check show/hide performs, the methods are considerablely slower. If you call the method repeatly, you may want to use the css method.
    – Gqqnbig
    Jul 21, 2016 at 0:06
34

Difference between show() and css({'display':'block'})

Assuming you have this at the beginning:

<span id="thisElement" style="display: none;">Foo</span>

when you call:

$('#thisElement').show();

you will get:

<span id="thisElement" style="">Foo</span>

while:

$('#thisElement').css({'display':'block'});

does:

<span id="thisElement" style="display: block;">Foo</span>

so, yes there's a difference.

Difference between hide() and css({'display':'none'})

same as above but change these into hide() and display':'none'......

Another difference When .hide() is called the value of the display property is saved in jQuery's data cache, so when .show() is called, the initial display value is restored!

6

Yes there is a difference in the performance of both: jQuery('#id').show() is slower than jQuery('#id').css("display","block") as in former case extra work is to be done for retrieving the initial state from the jquery cache as display is not a binary attribute it can be inline,block,none,table, etc. similar is the case with hide() method.

See: http://jsperf.com/show-vs-addclass

1
  • 2
    and the performance becomes critical when too much show and hide is used in the page.
    – aquasan
    Mar 1, 2013 at 17:22
4

no difference

With no parameters, the .hide() method is the simplest way to hide an element:

$('.target').hide(); The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Same about show

1
  • Except that .show() will set the proper display property, while you'd have to select the proper property manually, with .css()
    – Cerbrus
    Nov 26, 2012 at 10:07
3

Yes there is a difference.

jQuery('#id').css("display","block") will always set the element you want to show as block.

jQuery('#id').show() will et is to what display type it initially was, display: inline for example.

See Jquery Doc

1
  • Note that this is only true in later versions of jQuery. 1.3, for example, does not hold true for this. Nov 26, 2012 at 10:25
2

You can have a look at the source code (here it is v1.7.2).

Except for the animation that we can set, this also keep in memory the old display style (which is not in all cases block, it can also be inline, table-cell, ...).

1

see http://api.jquery.com/show/

With no parameters, the .show() method is the simplest way to display an element:

$('.target').show();

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

1
  • Nice explanation.. Thanks :)
    – Sashi Kant
    Jul 20, 2015 at 4:14

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.