Writing the jQuery

Before we begin writing the code, let's think through what it needs to do. When a filter button is clicked:

• The button calls a function and passes to it the name of the class to be shown.
• Each list item is looped through in turn. If it has the correct class, it is shown using the show() method. If not, it is hidden using the hide() method.
• If the all button is clicked, then every list item, regardless of class, is shown.
• The button that was pressed calls a function and passes its id in. All of the filter buttons are looped through. If one of them has the selected class, the class is removed. The button that called the function then has the class added to it.

We will need three functions.

The first is a function to show or hide the correct list items. This is the function that our filter buttons will call. The function needs to know which images to show. We can use the classes to flag the correct images. Our function will take one argument -- the name of the class to show. Our function is named "showHide()".

showHide() works by looping through each of the li tags in the content list using the each() method. The jQuery each() method is the equivalent of a for loop in Javascript. To use it in jQuery, use your selectors to wrap a collection of elements. The each() method goes through the wrapped set, one element at a time, making the evaluation. It looks like this:

$('#content li').each();

Inside the each() parentheses, you write what you want to have happen. In our case, we want to take a look at the value of the class name that was passed into our function. If the li has a class that matches the value, then it should be shown. If not, it should be hidden.

Here is the function in full:

The "this" keyword is used to allow an object to refer to itself. As the each() method progresses through the list of li elements in content, each element is evaluated in turn. Each element becomes "this" element as it is evaluated.

Our second function will be used by the filter buttons to highlight the chosen button. Remember the class we defined called "selected?" When a button is clicked, it will receive the "selected" class. The previous button will have the selected class stripped off. The second function also takes a single argument -- the name of the button that was clicked.

To make getting the class attribute added and removed, we'll use jQuery's handy addClass() and removeClass() methods. They do exactly what you would think they would do. The addClass() method will add whatever value is specified as a parameter of the method.

The removeClass() method is attached to the element that you want to remove the class from. It strips the class off. If there is no class in the first place, then it fails silently.

Our second function's name is toggleSelection() and is passed the id of the button that was clicked. It uses the each() method to loop through all the a tags that are wrapped by li tags in filters div. Again, the "this" keyword is used with each a tag in turn. The class is stripped off the a tags.

Then the a tag that was clicked has the class "selected" added to it and the button is restyled to be highlighted. Here is the function:

Our last function, the one that shows everything, doesn't require an argument. It will have the sensible name "showAll()." It uses the each() method to loop through all the li tags in content and show them, once again, using the "this" keyword.

Here is the function:

Be sure to add all three functions to your script tag.

Next, we need to add the event listeners to the filter buttons. All of the filter buttons except the "all" button do pretty much the same thing. On the click event, they call showHide() and pass in the class that matches. They then call the toggleSelectd() function and pass themselves in as the recipient of the selected class. Below is the call that the star button makes:

For the sake of space, if we stretch those out into a single line, we can add all the event listeners like this:

The all button gets a slightly different event handler. It calls the showAll() function before calling the toggleSelected() function. It looks like this:

Add all the events and their event handlers to your script. Below is the completed code:

Save, and open your page in a browser.