Side Accordion Menu in Mootools

A recent project involving a request for an ‘accordion’ style content box allowing multiple blocks of copy to occupy the same space (I assume to give a less wordy impression to users while retaining ‘searchability’ in Google) has led me down a mootools-based route… having never used the mootools JavaScript framework before I was quite surprised at how simple it was to integrate.

One of the requirements of the menu was that the menu that controls which content was on show need be on the left. My first approach at this had the ‘tab’ which selected the content and the content itself side by side, but this threw up problems when the content was long (pushing the other menu items down the page too). I ended up splitting the tabs and the content – RESULT!

Preview (screenshot):

View online demo: demos » mootools » accordion
Download demo: Accordion.zip
Tested & working in: IE6, IE7, Chrome, Opera 9.64, FF3

2 comments so far

  1. Vera said:
    On 17 Nov at 7:24 pm

    Very nice. I especially like the transition effect. I find mootools similar enough to jQuery, but I generally end up using the latter because it has a much better documentation.

    Any special reason you chose mootools? Other than wanting to learn a new framework, I mean.

  2. Jem said:
    On 17 Nov at 7:30 pm

    Designer requested a pre-made mootools solution, but it was running on outdated version. I had to start again but without straying from the effect she wanted; figured the best way to get consistency was to stick with her choice of framework.