The jQuery API .show() will make the matched element or elements appear on the page.

It will remove the inline style of style="display:  none" that may have been put there by the .hide() method and replace it with style="display: block".

Or it will simply add the inline style of style="display: block" to the matched element(s) which will override any styling from a stylesheet to hide the element.

If the matched element already is appearing on the page, the .show() does not add any inline style to the element.


Let us look at an example:


The code above is first using the .hide() method to remove the elements from the page as they are clicked. You will notice in the demo that not only does the text disappear, the entire element is removed - which can affect the layout of the content. The .hide() method inserts an inline style of style="display: none" to the elements that match the selector. 

In the example we used $(this) so that only the individual element that received the action of the click will be removed. If we had $("h2.hideit").hide() in that line instead of $(this) ALL of the elements that matched that selector would disappear.

If the visitor clicks on the <h2 class="showagain"> element, all of the <h2 class="hideit"> elements will appear. The .show() removed the style="display: none" put in by the .hide() method and puts in style="display: block".

Here is the HTML for the example:

<h2 class="hideit">Hide Me 1</h2>
<h2 class="hideit">Hide Me 2</h2>
<h2 class="hideit">Hide Me 3</h2>
<h2 class="showAgain">Show All</h2>

Here is the result:


Other options for the .show() method

There are several ways to use the .show() method.

You can have the elements reappear slowly using "slow" or put a number in the parentheses for the duration.


You can add another function so that another number of effects occur after the .show() action is complete.

    // code goes here