Basic Hide and Show

Basic .hide() and .show(), without any parameters, can be thought of as smart shorthand methods for .css('display','string'), where string is the appropriate display value. The effect, as might be expected, is that the matched set of elements will be immediately hidden or shown, with no animation.

The .hide() method sets the inline style attribute of the matched set of elements to display:none. The smart part here is that it remembers the value of the display property—typically block or inline—before it was changed to none. Conversely, the .show() method restores the matched set of elements to whatever visible display property they had before display:none was applied.

This feature of .show() and .hide() is especially helpful when hiding elements whose default display property is overridden in a stylesheet. For example, the <li> element has the property display:block by default, but we might want to change it to display:inline for a horizontal menu. Fortunately, using...