Tutorial: jQuery Show, Hide, and Toggle functions

Continuing in this series of introducing jQuery functions and features, I will demonstrate changing the appearances of objects with the hide / show function and the toggle function.

If you have missed the first three parts of the jQuery series, be sure to check them out below, as they set the foundation for the continuation of steps that we will take in this segment:

How to use filter functions in jQuery This segment reviews the filter (selector) functions with several examples using the odd and even selectors, and then changing an objects content text with the .text() function.

Keeping up appearances!

jQuery allows you to hide specified sections or content using the .hide() function, which hides the matched elements when called. The hide function has two other versions that allow for duration, callback, and easing; all three versions are listed below:

.hide() the basic hide function

.hide( duration [, callback]) where duration is a string or number determining how long the animation will run, and callback is a function to call once the animation is complete.

.hide( [duration] [, easing] [, callback] ) where the addition of the ‘easing' is a string indicating which easing function to use for the transition.

With no parameters, the .hide() method is the simplest way to hide an element and is expressed as:

$('.target').hide();

In the demonstrated examples we will continue using the index.html file from our web directory (see download); for the hide function, we will create a jQuery statement to toggle the two elements with class="test".

First, let's add in the submit button to lines 27 through 29 within the first <section>:

<p>Hide any element with class equals "test".</p>

<input type="button" id="hide" value="Hide where class='test'" />

Next, in the <script> section we will add this jQuery code within the document ready function area:

$('#hide').click(function () {

$(".test").hide();

});

Open the index.html file from the web directory and then click on the button Hide where class='test' and you will notice the second and third boxes will be hidden, as shown in the screen captures from Chrome 18.0.1 below:

Figure A

Now, let's add in the easing function ‘slow' to our hide transition with the following example:

$(".test").hide('slow');

Now, let's refresh the index.html document and click the hide button again. Notice the transition to hide the elements. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. So, let's say we make the duration ‘600'. Update that and refresh the page again, either way, the effect is the same.

So now, you might want to see the content again, and we could add in a .show() function:

$(".test").show();

But we can also use the toggle .toggle() function for the same purpose, which replaces the hide/show functions.

Let's, add in this button code starting with line 31 in the index.html:

<p>Toggle any element with class equals "test".</p>

<input type="button" id="toggle" value="Toggle where class='test'" />

Then, add in the .toggle () function within the jQuery document ready function

$('#toggle').click(function () {

$(".test").toggle();

});

Refresh your index.html document file in your browser and then click the new button Toggle where class='test'. You will see the two boxes hide and show with each click. The magic behind the toggle function is that if an object is currently displayed on the page, upon button-click, the object will disappear, and if the object is already hidden, once clicked, it will appear.

In the next installment in the jQuery series, we will review creating an expandable FAQ using some of the techniques we have learned in this segment.

Related Topics:

About Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Full Bio

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal government.