JQuery_ Novice to Ninja - Earle Castledine [63]
…
});
The menu will only reveal itself when it thinks a user wants to see it. The best way to experience what this plugin is doing is to compare this example to the previous one, dragging the mouse horizontally across the menu. In our previous example, the menus will slide open in a wave as you move across them; when using hoverIntent, the menus will only slide open when the mouse comes to rest.
As with most plugins, the documentation outlines the handful of options you can specify to fine-tune the effect, so be sure to read through it if you plan on using this functionality.
Accordion Menus
Accordion menus are named after the musical instrument, in the way the expansion of one area leads to the contraction of another. Typically, accordions are fixed so that one—and only one—of the areas must be visible at all times, though some accordions let you collapse an already open area so that all items are hidden.
A Simple Accordion
Accordions can be trickier than you’d expect. We saw earlier how a simple expanding and collapsing menu system could be implemented in just a few lines of jQuery code. It’s then reasonable for you to assume that adding a constraint (that only one menu element can be open at any time) would be straightforward. Although the basic implementation is indeed quite simple (this is jQuery, after all!), there are some caveats involved in enforcing more complex constraints that you should be aware of.
For this example, we’ll be building a simple accordion to group celebrities according to their popularity; this will allow us to save quite a bit of precious screen real estate on the StarTrackr! site. The result we’re aiming for is illustrated in Figure 5.4.
Figure 5.4. A simple accordion control
You can set up an accordion using virtually any structure of HTML markup; all you really need is a set of clearly identifiable headers, each associated with a block of content. For this example, we’ll be using a set of nested lists, like this:
chapter_05/07_simple_accordion/index.html (excerpt)
"A" List Celebrities
"B" List Celebrities
…
This list markup is an ideal HTML structure for a menu, but there are certainly other options; you could just as easily use a set of nested divs, with header elements providing the title of each section. Just about any structure is suitable, as long as it’s consistent and allows you to select all the header triggers and related content. We’ve styled the list with some CSS, which you can consult in the sample code archive.
When our page loads, all of our content areas are visible. By now you should know what’s coming next: we need to hide all of the content, except for our default item:
chapter_05/07_simple_accordion/script.js (excerpt)
$('#celebs ul > li ul')
.click(function(e) {
e.stopPropagation();
})
.filter(':not(:first)')
.hide();
We’ve done this slightly differently than before. In this case we’ve also pre-empted an issue that we’ll have with event bubbling (covered in the section called “Event Propagation”). This sort of statement really shows the power of jQuery: we start by attaching an event listener to every content area, then filter down our selection to exclude the first area, and hide everything that’s left.
The filter command is a really handy way of narrowing down a selection mid-statement. Any elements that don’t match the criteria passed to it are discarded from the selection and are no longer affected by subsequent jQuery commands. You can specify the criteria as a selector or as a function (see the note below). We’ve used filter selectors in the previous example (:not and :first)—but you can use any jQuery selector to help you find the elements you’re after.
:not is a neat utility selector, as it selects the opposite of whatever follows it in parentheses.