Tech Note: Flippy Triangle Style

• Views: 15,158

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:

► LGF Hits

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.

$(document).ready(function() {
    $('a.flippy').click(function() {
        var heading = $(this).html().substr(1);
        var content = $(this).parent('p').next('div.slider');
        if ($(content).is(':hidden')) {
            $(this).html('▼' + heading);
            $(content).slideDown('fast');
        } else {
            $(this).html('►' + heading);
            $(content).slideUp('fast');
        }
        return false;
    });
});

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., “► 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.

Jump to top

Create a PageThis is the LGF Pages posting bookmarklet. To use it, drag this button to your browser's bookmark bar, and title it 'LGF Pages' (or whatever you like). Then browse to a site you want to post, select some text on the page to use for a quote, click the bookmarklet, and the Pages posting window will appear with the title, text, and any embedded video or audio files already filled in, ready to go.
Or... you can just click this button to open the Pages posting window right away.
Last updated: 2023-04-04 11:11 am PDT
LGF User's Guide RSS Feeds

Help support Little Green Footballs!

Subscribe now for ad-free access!Register and sign in to a free LGF account before subscribing, and your ad-free access will be automatically enabled.

Donate with
PayPal
Cash.app
Recent PagesClick to refresh
Why Did More Than 1,000 People Die After Police Subdued Them With Force That Isn’t Meant to Kill? An investigation led by The Associated Press has found that, over a decade, more than 1,000 people died after police subdued them through physical holds, stun guns, body blows and other force not intended to be lethal. More: Why ...
Cheechako
Yesterday
Views: 43 • Comments: 0 • Rating: 0
A Closer Look at the Eastman State Bar DecisionTaking a few minutes away from work things to read through the Eastman decision. As I'm sure many of you know, Eastman was my law school con law professor. I knew him pretty well because I was also running in ...
KGxvi
Yesterday
Views: 98 • Comments: 1 • Rating: 1