Hide and show in javascript

This post looks at how to show and hide an element with jQuery using the show(), hide(), toggle(), fadeIn() and fadeOut() functions.

Example HTML

The following examples all use a paragraph that looks similar to this:

<p id="example">This is an example of text that will be shown and hidden.</p>

Basic hide and show

The most simple way to hide an element with jQuery is to call .hide() and then .show() to show it again.

This makes the element instantly show or hide.

If we had a couple of buttons to hide and show the above paragraph they could look like this, although of course you’d normally attach events to a button in the docment ready function:

<input type="button" value="Hide" onclick="$('#example').hide()" /> <input type="button" value="Show" onclick="$('#example').show()" />

Here’s the above example in action:

This is an example of text that will be shown and hidden.

Controlling the speed

Control how quickly to hide and show the element by passing in ‘slow’ ‘normal’ or ‘fast’

hide show input jquery

show hide field jquery