The jQuery API .hide() will remove the matched element or elements from display on the web page.

It will add the inline style of style="display:  none" to the matched element or elements.


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 .hide() method

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

You can have the elements hide 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 .hide() action is complete.

    // code goes here