A couple months ago we comped up a slick new featured projects page for one of our clients that featured an image based accordion UI. Each accordion toggle would have a specific image that would fill the entire toggle and on click would change into a different image.

Once the design phase was completed and both sides were happy with the direction of the new site we began the development phase. However, once we got to coding the accordion prototype we realized none of the popular UI libraries had accordions that worked quite like what our comp depicted. So, after much searching and some failed attempts we stumbled upon a hacked version of a MooTools which was close. A developer by the name of Chris Esler had modified the MooTools code to allow a custom image on the left side of the toggle to “light up” once clicked.

By modifying the CSS and JavaScript some New Breed managed to come up with an accordion UI that functioned as our comps depicted and also worked cross browser and within our CMS system.

We are happy to offer our modified Image Based Accordion UI code to any developers that might find it useful.

USAGE :

We don’t like to get too specific with usage instructions since we assume anybody downloading this code in the first place has a pretty good idea of what they are doing. Basically you just need to keep these two things in mind when updating the code for your own purposes.

• For each image placed in “toggler” class div you must give it an id called arrow and then an integer value starting with 0. So “arrow0″, “arrow1″,”arrow2″ etc for however many toggles your page will include.

• Secondly for the toggler active state you must include an image with the same exact name as the inactive state but with the word “Open” appended to the end of the filename. It must also be in the same folder. So for example if your inactive toggler image was called “tab1.jpg” you’d want to make sure you also had a file called “tab1Open.jpg” in the same folder.

DOWNLOADS :
VIEW EXAMPLE | DOWNLOAD CODE  (ZIP)

SEE ALSO :
MOOTOOLS | CHRISESLER.COM

Posted by C. Mathieu 3-29-10

accordion · mootools · ui · web