Tech Note: Flippy Triangle Style

Fri, Jun 27, 2008 at 5:50:17 pm PDT

You may have noticed that I've organized the stuff in our left sidebar with a series of "accordion" menus; some call this style the Flippy Triangle, since a little triangle indicates whether the menu is currently expanded or not, by ... flipping, believe it or not.

Here's the technique I'm using to create those Javascript-driven menus; you might be surprised by how little code it takes, with the assistance of the excellent Javascript library jQuery. I'll assume you already have jQuery installed and get right into the code.

The HTML for the menus is very simple: a paragraph containing a link at the top (the "trigger" for the menu), and a DIV containing a series of links to the items in the menu. In the CSS file, the class "slider" is set to "display: none" so that the DIVs underneath the triggers are hidden by default. Here's a simplified version of the HTML:

Now for the jQuery magic. Most jQuery-related applications use the $(document).ready function to install Javascript event handlers, and that's how we attach the Flippy Triangle code to the triggers, to show or hide their associated content.

And that, my coding friends, is that. Really. That's the whole thing, except for some details about styling the various elements with CSS (colors, spacing, etc.).

Without going through it line by line, that little bit of code first finds all A tags with a class of "flippy" and attaches an anonymous function to their click events. The click handler gets the text of the trigger (e.g., "&#x25BA LGF Hits"), then does a quick DOM traversal to find the next DIV with a class of "slider." If that DIV is hidden, it's displayed with a "slideDown" effect; if it's visible, it slides up and disappears. Before hiding/showing the DIV, the flippy triangle character is flipped. Finally, the click handler returns a value of FALSE, so the trigger link doesn't do anything embarrassing or annoying.

One little gotcha is that the character entities '►' and '▼' (which look like ► and ▼) are treated by Javascript as one character, not eight. That's why the code that gets the trigger text uses "substr(1)" instead of "substr(8)".

jQuery is the cat's pajamas.