jquery css display property set to ''" is it valid usage?

Question

I have used the following jquery code to hide and show an element on a click event of a button

<div id='testDiv'>Test</div>
$('#testDiv').css('display','none');
$('#testDiv').css('display','');

There are plenty of examples on setting the display to block,inline etc and also use of jquery hide and show. The above code i used on my page works fine but i do not know if its correct use of the display. Can anyone please let me know if i should stop using it this way and use a valid property like 'block'. I used this as there was no initial display property set for the 'testDiv'.

Answer 1

It is documented by the jquery documentation as a valid way of removing a style that you have previously manipulated with jquery. It will set it back to the previous style. Be aware of some caveats though:

Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. As a consequence, the element's style for that property will be restored to whatever value was applied. So, this method can be used to cancel any style modification you have previously performed. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element. Warning: one notable exception is that, for IE 8 and below, removing a shorthand property such as border or background will remove that style entirely from the element, regardless of what is set in a stylesheet or element.

From the jquery docs here:

http://api.jquery.com/css/