Question

I was wondering what JQuery actually does to a <div> when you set it to hide?

Does it simply set it’s CSS display style to none?

The reason i ask, i wanted to set a <div> to be hidden initially (by setting the property manually, not by calling .hide) then use .show() to bring it into view when needed.

Answer 1

It sets it to display: none, though some extra work comes on, that’s the overall effect.

If you have a <div style="display: none;"> then .show() will show it 🙂

Here’s a quick demo showing this

If you’re more curious as to exactly what happens, you can always look directly at the source 🙂 The .hide() function inner-workings can be seen here: http://github.com/jquery/jquery/blob/master/src/effects.js#L59

The main difference between .hide()/.show() and .css('display':'whatever') for example, is that .show() restores the previous display value (or clears it so it’s default if it was never hidden with .hide()), instead of just picking a new one 🙂