jQuery is a powerful Javascript library which makes adding useful Javascript stuff to your website easy across browsers. 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’ or a decimal to indicate the number of milliseconds to make the animation last.
<input type="button" value="Hide - Slow" onclick="$('#example').hide('slow')" />
<input type="button" value="Hide - Normal" onclick="$('#example').hide('normal')" />
<input type="button" value="Hide - Fast" onclick="$('#example').hide('fast')" />
<input type="button" value="Hide - 2000" onclick="$('#example_2').hide(2000)" />
<input type="button" value="Show - Slow" onclick="$('#example').show('slow')" />
<input type="button" value="Show - Normal" onclick="$('#example').show('normal')" />
<input type="button" value="Show - Fast" onclick="$('#example').show('fast')" />
<input type="button" value="Show - 2000" onclick="$('#example').show(2000)" />
This is an example of text that will be shown and hidden.
toggle, fadeIn and fadeOut functions
Now let’s take a look at how the toggle, fadeIn and fadeOut functions work. There’s also a later follow up post which shows how to hide an element initially with CSS and show it later with jQuery.
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>
Toggling the element
Previously I looked at how to show and hide and element with jQuery using the show() and hide() functions. However, you can also simply toggle the element so it is shown if hidden and hidden if shown, use the toggle() function. It also supports the speed parameter that hide and show use.
<input type="button" value="Toggle" onclick="$('#example').toggle()" />
<input type="button" value="Slow" onclick="$('#example').toggle('slow')" />
<input type="button" value="Normal" onclick="$('#example').toggle('normal')" />
<input type="button" value="Fast" onclick="$('#example').toggle('fast')" />
This is an example of text that will be shown and hidden.
Fading in and out
And finally, you can also fade in and fade out. Again you can pass a speed parameter and I’ve done this using ‘slow’ below:
<input type="button" value="Fade Out" onclick="$('#example').fadeOut('slow')" />
<input type="button" value="Fade In" onclick="$('#example').fadeIn('slow')" />
This is an example of text that will be shown and hidden.
Conclusion
This is all fairly basic usage in these two post using these functions; you probably normally wouldn’t show and hide elements from clicking buttons but it makes it easy to illustrate the point.
Common uses for showing and hiding stuff is when hovering over a navigation element and showing a sub-menu, or showing the shopping cart contents when clicking a shopping cart icon on an e-commerce page.