jQuery 1.3 : Effects - Basic hide and show

The basic .hide() and .show() methods, 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 the .show() method on a hidden element such as one of these<li> tags would not merely reset it to its default display:block, because that would put the<li> on its own line. Instead, the element is restored to its previous display:inline state, thus preserving the horizontal design.

A quick demonstration of these two methods can be set up by adding a second paragraph and a "read more" link after the first paragraph in the example HTML:

<div id="switcher">
show() methodexample<div class="label">Text Size</div>
<button id="switcher-default">Default</button>
<button id="switcher-large">Bigger</button>
<button id="switcher-small">Smaller</button>
</div>
<div class="speech">
<p>Fourscore and seven years ago our fathers brought forth
on this continent a new nation, conceived in liberty,
and dedicated to the proposition that all men are
created equal.
</p>
<p>Now we are engaged in a great civil war, testing whether
that nation, or any nation so conceived and so dedicated,
can long endure. We are met on a great battlefield of
that war. We have come to dedicate a portion of that
field as a final resting-place for those who here gave
their lives that the nation might live. It is altogether
fitting and proper that we should do this. But, in a
larger sense, we cannot dedicate, we cannot consecrate,
we cannot hallow, this ground.
</p>
<a href="#" class="more">read more</a>
</div>


					  

When the DOM is ready, the second paragraph is hidden:

$(document).ready(function() {
$('p:eq(1)').hide();
});

And the speech looks like the following screenshot:

Then, when the user clicks on read more at the end of the first paragraph, that link is hidden and the second paragraph is shown:

$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').show();
$(this).hide();
return false;
});
});

Note the use of return false to keep the link from activating its default action. Now the speech looks like this: