Thursday, October 12th, 2006

Mootools Accordian Tutorial

Category: Examples, JavaScript, Library

Isn’t it fun to see students doing projects with Ajax?

Jonathan Molina just finished his final project which was to:

use a framework and show it being used as well as giving an example of how it can be used in a real life scenario.

I used Mootools for the frameworks just because it looks to me like an easier to understand framework and the functions that are built in are just perfect. The size and feature are just right.

I created a Video Tutorial of how to apply an Accordion effect to div blocks in a page and create a hands on feel to the site. I did do my best on exampling how to do it as easily as possible in the video … It took me many tries to get the video just as close to perfect as I could.

You can watch the making of this page in video form but it requires something that groks the 7z format. Not quite as usable as displaying it inline. Maybe someone should put it on GoogTube?


  1. window.onload = function() {
  2.     // Pick your classes
  3.     var myBox = document.getElementsByClassName('box_title');
  4.     var myBoxOpen = document.getElementsByClassName('expand');
  6.     // Create the accordian
  7.     var myEffect = new fx.Accordion(myBox, myBoxOpen, {});
  9.     // Tool Tips for extra information
  10.     var as = [];
  12.     $S('a').each(function(a){
  13.         if (a.getAttribute('title')) as.push(a);
  14.     });
  16.     new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25});    
  17. }

Mootools Accordian

Posted by Dion Almaer at 12:11 pm

3.6 rating from 69 votes


Comments feed TrackBack URI

It’s a zipped up quicktime video.

Comment by Rick Hudson — October 12, 2006

If you download or they handles 7z and are free. I am sure Winrar does as well and Winzip(I Think!) I don’t see why all Archive programs wouldn’t handle 7z since its an Open architecture so I hope they do.

I might do a google video post. I wasn’t thinking about since it had to be viewable in a class with a big projector.


Comment by Jonathan Molina — October 12, 2006

The downside is… um… what kind of bizarre format is 7z?
The Positive side is that it was super easy to implement. Eg;
var myEffect = new fx.Accordion(myBox, myBoxOpen, {});

I’d still like to see the video though (without downloading that codec thingamabob)

Comment by Dustin Diaz — October 13, 2006

Hey Dustin, love the podcast I am subscribed to it :) . 7z isn’t a codec. It’s a Archive format like ZIP or RAR. If you have a Acrhive program it should handle that if not you can download a small app that uncompresses it @ .

I am just using that because the video is 110mb and well 7z compressed it down to 21mb making downloading faster. Once it is uncompressed though you can use quicktime or anything else that handles MOV files to play it.

110mb download or 21mb download … I went for what would be easier on bandwidth and allow people to get it faster. Sorry for the confusion I seriously thought people would know about 7z more. I suppose not.

Comment by Jonathan Molina — October 13, 2006

GoogTube….hrhr….nice joke 8D

Comment by tubber — October 13, 2006

7zip is a compression format that compresses similar to RAR (sometimes smaller, sometimes larger) that is primarily used for torrents and is a complete waste of time. The majority of the time the compression advantage with 7z is negligible so just use a standard compression format

Comment by Andy Kant — October 13, 2006


zrcgzjki krxmfcwydps kdurok uvauqew

Trackback by ojzxrmzvv — October 14, 2006

7z … is a complete waste of time
really you didn’t know LZMA compression that’s probably one of the best and is totally free ?

LZMA, used by Null Soft Installer (a big range of programs) and many other famous programs too … just allows You to download a free, simple and fast GUI (WinRar or WinZip like) to compress or uncompress “every kind” of archive.

It’s a must, not a waste of time, imho.
Good work about this post :)

Comment by Andrea Giammarchi — October 14, 2006

I get “document.getElementsByClassName is not a function”

Comment by TL — January 16, 2007

Thanks a lot for this video. It is really easy to follow. It has been helpful to me to understand how to use this wonderful feature of mootools…

Comment by Shane plasebo — March 27, 2007

Leave a comment

You must be logged in to post a comment.