Once again, start off with an HTML table. This one is not quite as simple a table as in previous recipes. You'll need to create a few <td> tags that span the entire table, as well as provide some specific classes to certain elements.

The jQuery will "listen" for a click event on any <a> element that has a class of rowToggler. In this case, capture a reference to the event that triggered the action by passing e to the click handler function.

$( "a.rowToggler" ).click( function( e )

In this case, e is simply a variable name. It can be any valid variable name, but e is a standard convention. The important thing is that jQuery has a reference to the event. Why? Because in this case, the event was that an <a> was clicked. The browser's default behavior is to follow a link. This default behavior needs to be prevented.

As luck would have it, jQuery has a built-in function called preventDefault(). The first line of the function makes use of this by way of the following:

e.preventDefault();

Now that you've safely prevented the browser from leaving or reloading the page, set a variable with a value that corresponds to the name of the department that was just clicked.

var dept = $( this ).text().replace( /\s/g, "" );

Most of the preceding line should look familiar. $( this ) is a reference to the element that was clicked, and text() is something you've already used. You're getting the text of the <a> tag that was clicked. This will be the name of the department.

But there's one small issue. If the department name contains a space, such as "Information Technology", then this space needs to be removed.

.replace( /\s/g, "" )

replace() is a standard JavaScript function that uses a regular expression to replace spaces with an empty string. This turns "Information Technology" into "InformationTechnology", which is a valid class name.

The final step is to either show or hide any table row with a class that matches the department name that was clicked.

Ordinarily, the selector would look similar to the following:

$( "tr.InformationTechnology" )

Because the class name is a variable value, an alternate syntax is necessary.

jQuery provides a way to select an element using any attribute name and value. The selector above can also be represented as follows:

$( "tr[class=InformationTechnology]" )

The entire selector is a literal string, as indicated by the fact that it's enclosed in quotes. But the department name is stored in a variable. So concatenate the literal string with the variable value:

$( "tr[class=" + dept + "]" )

With the desired elements selected, either hide them if they're displayed, or display them if they're hidden. jQuery makes this very easy with its built-in toggle() method.