I’ll show you how to toggle the visibility on a group of selected elements. I’ll build up from a simple case to the more complicated ultimate goal.

First, whenever you’re working with jQuery and Javascript, you should probably get your references ready. For online references there’s the jQuery documentation (which is easier to search with Google than with the site search, I find) and the Mozilla Development Center Javascript reference among others. A very nice site to test, store, and share your jQuery snippets is jsFiddle.

Ok, let’s get started. First let’s toggle the visibility of an element with jQuery using .toggle(). Since we’re talking about user interfaces, we’ll probably trigger the toggle with an action, let’s say a .click():

1. $(document).ready(function(){

2.       // Toggle the visibility of all divs when one is clicked.

3.     $("input").click(function() {

4.         $("div").toggle();

5.     });

6. });​​

jsFiddle example

The code above will toggle the visibility of all the divs on a page if an input button is pressed.  The way this works is that after the document is ready, an event handler is bound to all the <input> elements. The handler waits for the user to click it. If clicked jQuery selects all the divs on the page and reverses their visibility. If they were invisible they become visible and vica versa.

Well, this was just to give you a tast of .toggle(), since the above example is pretty crude. Usually you want more control over which divs appear and disappear. In fact, an often trick part of visibility toggling in jQuery is to make sure each toggling button is linked uniquely to one block of content. You also want to ensure that when a block of content appears, all the other similar blocks of content disappears.

I’ll show you two methods of making sure that each time only one block of content appears, while all the other blocks of content disappears. The first method will only work if all the content blocks are siblings in the DOM. This will often be the case, since we’ll usually be dealing with semantically related chunks of content. The second way will be a little trickier but more flexible.

But before we start discussing siblings, let’s make sure we can toggle one specific div with one particular button. There’s many ways of doing this. I’ll show you how to use individual but related ids for the buttons and the content divs. Each button will have a name like, “block-x” where “x” is a number, and it’ll have a corresponding content block with the id “block-x-content”. Now if we have 3 content blocks, we could write one functions to control each block, for a total of 3 functions, but it’s more convenient and maintainable to generalize. We’re going to use input buttons with class “.toggler” to toggle the divs. You, of course, don’t have to use buttons, you can use other divs, or images, or whatever your little heart desires. So, so far we have:

1. $(document).ready(function(){

2.       // Toggle the visibility of all divs when one is clicked.

3.     $("input.toggler").click(function() {

4.         $( "#" + $(this).attr("id") + "-content" ).toggle();

5.     });

6. });​

jsFiddle example

The most complex part is the line with the toggle. The previous line simply binds an click event handler to all input elements with a “toggler” class. The function that is triggered in case of a click is an anonymous function that toggles one div. To see witch div gets toggled we’ll look more closely at “$(“#” + $(this).attr(“id”) + “-content” )” . The part inside the parentheses is simply a jQuery selector string. The string starts with a literal “#”, so we know that an element with a certain ID is getting toggled. The “#” is followed by the “ID” attribute of the element that was clicked. So far we have something like $(“#block-x”). This by itself would make the buttons disappear. But we know that each button has a corresponding content block. This block is selected by concatenating “-content” to the previous to give us a toggling of $(“#block-x-content”). Where is the number in the ID attribute of the INPUT button we clicked. Notice how the visibility of each DIV is kept track of separately. .toggle() is doing all the hard work for us.

Well, we’re approaching what we want. The previous example is okay, in that it let’s us toggle things, but it doesn’t really feel like we’re concentrating the attention of the user to one pertinent block of information. To achieve that end, we must make all the other divs invisible when we make one div visible.

We only have to change one line to achieve this. We’ll go from:

$( "#" + $(this).attr("id") + "-content" ).toggle();

to:

$( "#" + $(this).attr("id") + "-content" ).toggle().siblings().hide();

Notice how I chained the methods .siblings() and .hide() onto the previous line. This means that after toggling our content block, we’ll select the DOM siblings of that block and make them invisible. This means you have to make sure you’ve thought through your HTML. The easy way to do this is to nest all the content divs into a parent div, or if it makes sense, maybe to have content LIs in a parent UL or OL.

One finally change is that you may not want the content to disappear if a button is pressed twice, so we’ll switch out .toggle() with .show() to give:

1. $(document).ready(function(){

2.       // Toggle the visibility of all divs when one is clicked.

3.     $("input.toggler").click(function() {

4.         $( "#" + $(this).attr("id") + "-content" ).show().siblings().hide();

5.     });

6. });​

jsFiddle example

But what if our content DIVs aren’t siblings? They usually should be, just because of the way information is structured on an HTML page, but we really don’t want to count on that. We want the flexibility to toggle any set of elements we want.

To toggle any set of elements we want, all we have to do is create jQuery set of the elements and use .not() in combination with that. I’ll show you how.

First, let’s say that we have 3 content divs. Let’s select all of them with jQuery:

var theDivs = $("#block-1-content, #block-2-content, #block-3-content);

So, now theDivs is a jQuery selection of out content DIVs, let’s use that in combination with our click handler and .not() to toggle the appropriate content divs. Except, now I’m going to use an unordered list, so our content will be in LIs. If we’re dealing with unordered lists, we could easy have a situation where all the individual content LIs are not siblings of each other.

To show the corresponding content LI of a button, we’ll still use:

$( "#" + $(this).attr("id") + "-content" ).show();

But now we can’t simply make the siblings disappear. Instead we’ll make everything from our jQuery slection “theDivs” that isn’t the corresponding content LI vanish. Like this:

theDivs.not( $( "#" + $(this).attr("id") + "-content" ) ).hide();

And that’s it! You can of course replace the .show() and .hide() methods with fancier animations like .slideDown() and .slideUp(), but overall we have a relatively simple to implement, generalizable way of toggling the visibility of a group of content divs. The full code will look something like this:

1. $(document).ready(function(){

2.       // Create a selection of the content divs of interest

3.     var theDivs = $("#block-1-content, #block-2-content, #block-3-content");

4.       // Toggle the visibility of all divs when one is clicked.

5.     $("input.toggler").click(function() {        

6.         $( "#" + $(this).attr("id") + "-content" ).show();

7.         theDivs.not( $( "#" + $(this).attr("id") + "-content" ) ).hide();

8.     });

9. });​

jsFiddle example

Here are links to a few of them:

Ah, speaking of downloading JQuery, you just might want to understand how JQuery works if you use it. The first time I tried to do this, I simply clicked on my JQuery src file link:

1. <script type="text/javascript" src="http://peter-ajtai.com/jquery/jquery-1.4.2.min.js"></script>

… and this is what I saw:

Fun reading, huh? Well, when your browser loads Javascript, it has to load each charachter, so the less whitespace there is, and the shorter the variable names are, the faster it will load.

This means you should be using this, the minified, version of JQuery on your site, but if you want some pleasant and relaxing reading… you should look at the uncompressed version. JQuery shows you both versions very clearly on their download page, but for some reason, it took me a while to realize that there is an uncompressed version. The uncompressed version of the latest version is here. The uncompressed version is actually very readable:

Below is a working example:

1. Introduction
2. Starting and stopping the animation using checkButton()
3. Moving the ball image using animateBall()
4. References
5. Conclusion

Introduction

Here is the code that makes the ball move. For the rest of this post, I’ll go over the basic ideas required to put the code together and how the specific code works:

1. <script type="text/javascript">

2. // <!--

3.     var distanceBall=0; 

4.     var directionBall=1; 

5.     var timerToggle=null; 

7.     function animateBall() {   

8.         document.getElementById("basketball").style.top=distanceBall + "px";

9.         distanceBall+=directionBall;

10.         if (distanceBall>200) { directionBall=-1; }

11.         if (0>distanceBall) { directionBall=1; }

12.         timerToggle=setTimeout(function() { animateBall(); },10);

13.     }

15.     function checkButton() {

16.         if (document.getElementById("ballButton").value=="Animate Basketball") {

17.             document.getElementById("ballButton").value="Stop Basketball";

18.             animateBall();

19.         } else {

20.             document.getElementById("ballButton").value="Animate Basketball";

21.             clearTimeout(timerToggle);

22.         }

23.     }

24. // -->

25. </script>

27. <input id="ballButton" onclick="checkButton()" type="button" value="Animate Basketball" />

28. <div id="basketball" style="position: relative;">

29.     <img src="http://netlumination.com/wp-content/uploads/2009/10/Basketball_64x64-1.png" alt="Basketball" />

30. </div>

Here’s a jsFiddle for you to play with.

There are two functions in this script, animateBall() and checkButton(). animateBall() is what makes the basketball image move. checkButton() starts and stops the ball. Let’s start by going over checkButton(), since that is the function that is called if the viewer presses the “Animate Basketball” button.

Starting and stopping the animation using checkButton()

Whenever you create an animation, or any sort of constantly running JavaScript, it’s considerate to allow the viewer to stop the script somehow. This is done using the checkButton function. The checkButton function also starts the script running, so it serves a dual purpose.

1. function checkButton()

2. {

3.   if (document.getElementById(“ballButton”).value == ”Animate Basketball”) 

4.   {    

5.     document.getElementById(“ballButton”).value = ”Stop Basketball”;

6.     animateBall();

7.   } else 

8.   {

9.     document.getElementById(“ballButton”).value = ”Animate Basketball”;

10.     clearTimeout(timerToggle);

11.   }

12. }

The checkButton function checks what the input button says and does  one of two things based upon what the button reads. Looking at the HTML of the INPUT button, you can see that the INPUT button has the ID of “ballButton.” So, we can use document.getElementById(”ballButton”).value to access the words on the button. Accessing  HTML elements, their attributes, and inline CSS styles on a web page with Javascript can be done using the Document Object Model (DOM). Here and here are two easy to use references for the DOM.

checkButton() first replaces the words in the button. If the button reads, “Animate Basketball” it writes in “Stop Basketball” instead. We know the button can only read one of two things, so we use the ELSE statement to set the INPUT BUTTON to “Animate Basketball” if it doesn’t already say that. So one of the things the IF, ELSE statement does is toggle the INPUT BUTTON between “Animate Basketball” and “Stop Basketball”

There is a second line after the writing on the button is changed. If the button read “Animate Basketball” then the function animateBall is called. This gets the ball moving.

If the button read “Stop Basketball,” the ELSE statement, then the ball is stopped using clearTimeout. I’ll go over how clearTimeout works later. For now it’s just important to understand that checkButton simply functions as a toggle that does two things whenever it’s called. First, it changes the writing on the INPUT button. Second, it either starts or stops the basketball image moving.

Let’s look at how the basketball image is moved when checkButton() calls the animateBall function.

Moving the ball image using animateBall()

This is the heart of the animation, and what’s startling is how few lines it takes to animate something with JavaScript.

Essentially what we want to do is move the DIV containing the basketball image small steps at a time. This requires two things: physical movement of the DIV and a time increment in which this movement will be done.

1. var distanceBall=0; 

2. var directionBall=1; 

3. var timerToggle=null; 

5. function animateBall() {   

6.     document.getElementById("basketball").style.top=distanceBall + "px";

7.     distanceBall+=directionBall;

8.     if (distanceBall>200) { directionBall=-1; }

9.     if (0>distanceBall) { directionBall=1; }

10.     timerToggle=setTimeout(function() { animateBall(); },10);

11. }

If you look at the HTML, you’ll see that the basketball image is in a div with the ID “basketball” and the it’s CSS style of postion is set to RELATIVE. It’s important to set the position to RELATIVE, since that means that we can use the TOP or LEFT CSS styles to change the position of the DIV relative to where you see it when the image loads.

1. <div id="basketball" style="position: relative;">

2.     <img src="http://netlumination.com/wp-content/uploads/2009/10/Basketball_64x64-1.png" alt="Basketball" />

3. </div>

There are three variables that the animateBall function uses. The first is distanceBall. distanceBall is how many pixels the TOP CSS property of the DIV with the basketball image in it is set to. So distanceBall will control where the image is displayed. directionBall will control whether the image is moving up or down. We need this so that the image doesn’t wander too far away. Finally the timerToggle variable will allow us to stop the ball from moving. This is done as a courtesy to the viewer.

The first line of the animateBall function adds directionBall to distanceBall. Initially directionBall is 1, so this simply adds 1 to distanceBall.

Next we display the DIV containing the basketball image at this new location. We use the HTML DOM objects to reference the DIV. We know the DIV has an ID of “basketball”. This makes it easy to pick out from all the other elements on the page by writing document.getElementById(“basketball”). Now to specifically target the CSS TOP style we’ll use document.getElementById(“basketball”).style.top. The top property can be read from the browser or it can be written to. In other words we can change it. It’s almost as simple as setting it equal to distanceBall. The only trick part is that TOP has units. We’ll use pixels, so me must concatenate “px” to the end of the number. We do this using the + string operator.

So with just two lines of code we’ve moved the DIV one pixel. The next two lines, the two if statements, check if the DIV is at a TOP greater than 200 or less than 0. If it is, it reverses the direction of movement, so that the ball ends up bouncing up and down 200 pixels. Here is an alternative way to write those two lines as one line (to understand the codes look at this page on JavaScript comparison and logical operators):

1. if(distanceBall>200 || distanceBall<0){directionBall*=-1;}

Anyway, this all looks great so far, but we’ve only moved the ball one pixel. We have to repeat this movement every few moments. This would be very easy if there was a function to pause a JavaScript program, but there isn’t, and trying to make a custom function to do this can end up with very messy results. There is, however, a way to tell JavaScript to do an action in a set amount of time. It’s like setting an alarm clock. It’s called setTimeout() and here is how it works:

1. setTimeout( [What to do] , [How long to wait] );

It’s important to realize that when you use setTimeout(), Javascript will keep evaluating the lines below setTimeout immediately. It does not pause. It’s like setting an alarm and keeping right on going, now with the alarm timer ticking in the background.

The way to use setTimeout in our animation function is to use it as the last line, and have it call our animation function itself. Like this:

1. function animateBall() {

2.     [ move ball one increment and show it at its new location ]

3.     setTimeout( function() { animateBall(); } , 10 );

4. }

This will perform the animateBall() function once every 10 milliseconds, since setTimeout measures time in milliseconds. It’s important that animateBall is not a for, while, or do loop, since setTimeout does not pause the execution of the script. Also, not the use of the anonymous function ( function () { … } ) in setTimeout. This is better than putting animateBall() in quotes and using eval().

Now that we have the ball going, how can we make it stop? The way to stop the animation and the ball is to somehow get setTimeout() to stop firing.

You’ll notice that the variable timerToggle is set equal to setTimeout() in the animateBall funciton. This may look confusing, since it’s not immediately apparent what sort of variable timerToggle is. Well, timerToggle simply allows us to keep track of the specific timer we used for the animation, so that we can stop it by using clearTimeout().

To stop a timer we’ll use clearTimeout(). The only thing we have to do is tell the browser which timer we want to stop. Luckily this is what the timerToggle variable is for, so clearTimeout(timerToggle) will stop the ball from moving.

clearTimeout() is not in the animateBall function, it is in the checkButton function. This is because clearTimeout is called if the viewer presses the button while the ball is moving.

Conclusion

Ok, so that’s it. You can animate a DIV on your page using one simple function, and you can stop and start the animation using a second function.

Remember that we are moving the DIV with the image inside. This means we could also put other things in the DIV like a paragraph, form, list, etc.

You should always consider the pros and cons of using animations on your page. As anyone who has sat through a few Power Point presentation knows, it is easy to go overboard with animations (and sound effects, but that’s another matter).

However, if you can link the animation to the content of your page, it may be well worth using it. For example, if you have a site about food, you could style the logo of your page to slide onto the page like a platter of food being served. Again, this can be done elegantly or it can be easily overdone. Additionally animation and interactivity (like the ability to start and stop the animation) is the seed of video games and interactive art.

Finally, you should consider how this simple function can be improved. You might have noticed that I used global variables. This limits the names of other variables that can be used on the same page, which can be especially problematic or confusing in large projects. So, removing the global variables would be ideal. This leads me to a second possible change. Instead of using an inline call to a javascript function in an HTML DIV, I could create an event handler for that DIV. This would allow me to get rid of the global variables too.

Exactly how to do that might be the subject for a later post.

References

Tutorial on JavaScript animation

Javascript operators

Javascript methods

Javascript DOM reference

Javascript DOM reference

Basketball Image