Valid and Accessible Collapsible Panels with Mootools

The other day my friend Matt Stow mentioned Mootools as a lightweight alternative to prototype and scriptaculous, so I decided to check it out.

Yet another collapsible panel!

On the whole, I think I’m impressed with Mootools/Moofx. Firstly, check out the download page. It lets you choose and pick exactly what components you want, it will find the dependencies and then bundle and compress them for you. How easy! I ended up getting just Fx.Slide, and the entire javascript is only 22kb: prototype + scriptaculous (effects only) is 166kb.

It was also a lot easier (almost implicit, in fact) to get it working decently with multiple clicks. It’s still not perfect (hold down enter..) but it’s definitely good enough, whereas scriptaculous required a .style.height = 0 hack.

I did still need one hack though: if you try to run slide = new Fx.Slide(contents); slide.hide(); from within the contents div, IE doesn’t seem impressed. Try it here: IE test case. But I didn’t want to just move the script out because if the content is large or the connection is slow the content might flash and make for jerky loading. So I ended up with something like:


function collapsibleOnClick(div, heading, contents)
{
    contents.style.display = 'none';

    var slide_effect;
    return function() {
        if (!$defined(slide_effect)) {
            contents.style.display = '';
            slide_effect = new Fx.Slide(contents);
            slide_effect.hide();
        }

        // ...
    };
}

So that it’s hidden with display: none initially, and on the first click it will re-display and create our funky Fx.Slide object. The world is saved.

I’d like to look into further compression / culling of scriptaculous, but right now I’m inclined think Mootools feels nicer regardless of size.

2 Comments:

  1. You should really check out jQuery sometime;

    in order to get the same effect with the same markup you would only need something along the lines of:

    $(“div.collapsible > h2″).click(function () {
    $(this).next().slideToggle();
    });

    now thats some kleenecode ;-)

  2. sorry for the double post but, I forgot address the Accessibility front…

    See: http://pastie.org/226889 (don’t know how long this will stay up)

    Not as pretty as before, but still roughly half the amount of code :-D

Leave a Reply