Updated for mootools v1.2!
From mootools.net:
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
The MooTools Production Team has a great set of demos on their website which show the potential of what is possible to be created from the MooTools framework. The demo I am focusing on is the Accordion. I am going to show you what I had to do getting it work on my website; it is fairly simple but took me a lot of research, trial and error.
First of all, the demo code for the Accordion located on the MooTools website will work out of the box for simple websites that do not include nesting of DIVs. And that is the key to all the issues I was encountering.
So here is a run-down of what I needed to do in order to tweak their demo code to work in my case. (Which I am sure is the case for many other webmasters.)
In version 1.2 of the mootools framework, you now have the ability to download the core (in full, or just the modules you need) separate from the plugins modules. So, navigate to the MooTools website and download the YUI Compressed version of “Core”. After that, under developer tools, click “More Builder”. This is where you will get the Accordion plugin. Scroll to the bottom of the page and click “Accordion” and download the YUI Compressed version.
That is all you need! The process is much simpler than it was with version 1.1!
Here is our Accordion Test Page, copy the code and save it to test.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accordion Test Page</title>
</head>
<body>
<div id="rap">
<div id="content">
<div id="sidebar">
<h2 class="atStart">Accordion 1:</h2>
<div class="atStart">
<p>Test Content 1</p>
<p>Test Content 1</p>
<p>Test Content 1</p>
<p>Test Content 1</p>
<p>Test Content 1</p>
</div>
<h2 class="atStart">Accordion 2:</h2>
<div class="atStart">
<p>Test Content 2</p>
<p>Test Content 2</p>
<p>Test Content 2</p>
<p>Test Content 2</p>
<p>Test Content 2</p>
</div>
<h2 class="atStart">Accordion 3:</h2>
<div class="atStart">
<p>Test Content 3</p>
<p>Test Content 3</p>
<p>Test Content 3</p>
<p>Test Content 3</p>
<p>Test Content 3</p>
</div>
</div>
</div>
</div>
</body>
</html>
We must also create our own javascript file, which creates an instance of the accordion. We will call the file “site.js” and it should contain the following code:
window.addEvent('domready', function() {
var stretchers = $$('div.atStart');
var togglers = $$('h2.atStart');
var accordion = new Accordion(togglers, stretchers, {
display:0,
opacity: false,
onActive: function(togglers, stretchers){
togglers.setStyle('background', '#99ccff'),
togglers.setStyle('color', '#FFFFFF');
},
onBackground: function(togglers, stretchers){
togglers.setStyle('background-color', '#6699cc');
togglers.setStyle('color', '#CCCCCC');
}
}, $('sidebar'));
});
Now we must add this in between our <head></head> markup:
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>
<script type="text/javascript" src="site.js"></script>
Our file test.htm should now look like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accordion Test Page</title>
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>
<script type="text/javascript" src="site.js"></script>
</head>
<body>
<div id="rap">
<div id="content">
<div id="sidebar">
<h2 class="atStart">Accordion 1:</h2>
<div class="atStart">
<p>Test Content 1</p>
<p>Test Content 1</p>
<p>Test Content 1</p>
<p>Test Content 1</p>
<p>Test Content 1</p>
</div>
<h2 class="atStart">Accordion 2:</h2>
<div class="atStart">
<p>Test Content 2</p>
<p>Test Content 2</p>
<p>Test Content 2</p>
<p>Test Content 2</p>
<p>Test Content 2</p>
</div>
<h2 class="atStart">Accordion 3:</h2>
<div class="atStart">
<p>Test Content 3</p>
<p>Test Content 3</p>
<p>Test Content 3</p>
<p>Test Content 3</p>
<p>Test Content 3</p>
</div>
</div>
</div>
</div>
</body>
</html>
At this point you should upload the 4 files (test.htm, mootools-core.js, mootools-more.js, and site.js) into a testing location on your web server, and test out the page. You could also try adding styling to the page for nicer looking results, but that is up to you.
View the Demo | Downloadable Archive
August 22nd, 2007 at 12:26 pm
Works great! Thanks for the post, this saved me a lot of time.
October 31st, 2007 at 2:22 pm
I’ve looked around for a tutorial as simple and helpful as this -this is it! Thanks!!
November 29th, 2007 at 11:25 pm
I am glad you found this of use!
On a side note,
I have been working on a nested accordion setup for a project I was contracted for. There is one minor bug in IE7, but once I can figure out how to rectify the issue, I will post another tutorial on how to go about setting it up.
January 31st, 2008 at 1:24 pm
Thanx for it! It’s just working. It was not easy to find a simple tutorial like this.
March 1st, 2008 at 3:23 pm
For those who’d like a compact mootools.js for this specifically:
1. Go to the mootols.net website
2. click on download
3. check “Accordion” on the bottom
4. check “Window.DomReady”
5. check “Element.Selectors” (which will select another automatically)
6. scroll down and click on “Choose compression type”
7. choose your preferred compression
(I recommend “No Documentation”)
You should get a 48kb mootools.js
April 5th, 2008 at 1:39 am
Thank you very much for this. It covers the bit I couldn’t figure out from the details on the Mootool site, mainly how to wrap it all in the window.domready.
May 7th, 2008 at 3:08 pm
Can you use a tr instead of an H2 for the header?
May 8th, 2008 at 10:08 am
I am sure you can. The mootools framework can manipulate anything, as far as I know. It just relies on the fact you use proper styling / javascript and of course validated syntax.
May 22nd, 2008 at 3:45 am
Thank you for this tutorial!
I think the key to getting the accordion to work with nested DIVs is the “$$(’div.atStart’);” syntax which is not presented in the mootools demo.
I was getting very frustrated with mootools until I found your blog! Thx again!
May 26th, 2008 at 9:28 am
Thank you so much for this. This was a well written article that explained your problem, your approach, and your solution that helped me understand how to approach mootools, esp. with me in my beginning stages.
June 6th, 2008 at 1:19 am
is there a way to keep the the first div closed too, when the page is loaded?
June 12th, 2008 at 12:17 pm
This HIGHLY informative article solved my problems like magic. Thanks!
June 16th, 2008 at 12:29 pm
Hi!! Good job!!
I have done an horizontal accordion with mootools, it’s very easy and nice. If you would see it, go to http://www.etconsultors.com
I’ve used other mootools effects and I am surprised by the power of this library.
Greetings.
PD (Sorry for my bad english)
–
Fran
http://www.etconsultors.com
http://blog.etconsultors.com
June 19th, 2008 at 5:29 am
What are the odds you’ll do an update on this for MooTools 1.2?
June 19th, 2008 at 8:47 am
Yes, I will be updating both… Today.
June 19th, 2008 at 9:52 am
[...] the recent release of mootools version 1.2, I have updated the Accordion Menu as well as the Nested Accordion Menu tutorials. I have also encountered a pretty big bug in the [...]
June 19th, 2008 at 11:24 pm
hi ryan
is it possible ho have all the divs collapsed at start instead of having the first div expanded?
June 20th, 2008 at 11:01 pm
Add:
start:’all-closed’,
in the site.js
Example:
var accordion = new Accordion(togglers, stretchers, {
start:’all-closed’,
display:0,
opacity: false,
onActive: function(togglers, stretchers){
togglers.setStyle(’background’, ‘#99ccff’),
togglers.setStyle(’color’, ‘#FFFFFF’);
June 23rd, 2008 at 12:35 am
don’t work. now all the divs appear opened.
any suggestion?
June 23rd, 2008 at 1:09 am
ok i’ve got it! i’ve changed display:0 to display: -1, and now it works.
thank you!
June 24th, 2008 at 10:23 am
Thanks for the correction!
June 28th, 2008 at 12:57 am
Im using images instead of the tags given in your tutorial and it works fine, BUT I was wondering is there anyway of changing the active image (toggler)?
June 28th, 2008 at 1:00 am
I would also like to know whether there is anyway of closing the content () by clicking the toggler (Accordion 1:)
June 29th, 2008 at 6:48 pm
Hello,
I am trying to use this accordion and I’m finding that I can’t embed a flash video in a div and have it work properly. The video stays on top of all of the other content and accordions.
What am I missing? It is working in FF 2.x, 3.0 and Safari on Mac and IE6 and IE7. Not in FF 2.x on PC.
Thanks!
July 30th, 2008 at 11:24 pm
Hi, I’m wondering if there is a way to trigger an element of the accordion through a button that is within the element division. So when the user clicks the button, their current element collapses and a different one expands.