Slicker Show and Hide

Last time I showed you how to make something appear and disappear on a web page. This time I'll show you how to do it with style.

Like we did last time, we'll start with our $(document).ready() and put everything else inside of it.

Adjust the Speed

This time, however, we're going to adjust the speed at which our item shows and hides. To do so, we put a speed indicator — "slow" or "normal" or "fast" or a number of milliseconds (1000 = 1 second) — inside the parentheses:

[js] $('#slickbox').show('slow'); [/js]

Note: If you use a speed word, put it inside quotation marks (either single or double); if you use a number, omit the quotation marks: $('#slickbox').show(500);

Attach Effects to Events

The final step here is to attach the effects to events. Last time we attached our effects to the "onclick" event of buttons. This time we'll attach them to links. But here's the rub: Links already have events attached to them. They take the user to whatever URL is indicated in the "href" attribute, usually another page. That means that we not only need to make something happen, but we also need to stop the default thing from happening. We can prevent the default behavior by adding return false;.

So let's take a look at how we would tie the "onclick" event of one link with an ID of "slick-show" to the "show" effect. Here, show() will display a DIV with an ID of "slickbox":

[js] // shows the slickbox DIV on clicking the link with an ID of "slick-show" $('#slick-show').click(function() { $('#slickbox').show('slow'); return false; }); [/js]

Notice that we attach ".click()" to "#slick-show". In jQuery, events will often have anonymous, or lambda, functions inside them. That's why inside the parentheses of ".click()" you see function() { ... }. By the way, it's called an anonymous function because it has no name associated with it. I don't know why it's also called a lambda function. Can someone enlighten me?

Here is the final code for three effects — show(), hide(), and toggle(). I've added $('#slidebox').hide() as the first line after $(document).ready() to hide that DIV when the page loads.

[js]$(document).ready(function() { // hides the slickbox as soon as the DOM is ready $('#slickbox').hide(); // shows the slickbox on clicking the noted link $('#slick-show').click(function() { $('#slickbox').show('slow'); return false; }); // hides the slickbox on clicking the noted link $('#slick-hide').click(function() { $('#slickbox').hide('fast'); return false; }); // toggles the slickbox on clicking the noted link $('#slick-toggle').click(function() { $('#slickbox').toggle(400); return false; }); }); [/js]

Look closely at the code and you'll see that our slickbox will show at a slow speed, hide at a fast speed, and toggle somewhere in between (in 400 milliseconds).

Demo 1

Try it out for yourself. Just click on the three following links:

Show the box Hide the box Toggle the box

This is the box that will be shown and hidden and toggled at your whim. :)

Newbie Tip

For those of you brand new to JavaScript as well as jQuery, the lines of code that begin with two slashes ( // ) are comment lines that have no effect on the code whatsoever. You can also create multi-line comments by enclosing them in /* and */

Other Effects

Other simple jQuery effects for showing or hiding elements include:

slideUp()
slideDown()
slideToggle()
fadeIn()
fadeOut()

Demo 2

Try the slide effects to see how they differ from show/hide:

Slide the box down Slide the box up Slide toggle the box

Bonus

For more sophisticated effects, check out ~~Stefan Petre's Interface plugin~~ jQuery UI

UPDATE

If this type of showing and hiding isn't exactly what you're looking for, please check out my other entries and the jQuery UI Accordion:

Learning jQuery