Updated for mootools v1.2!
As I promised a few months back, this will show you how to “nest” a two layer accordion menu, once again utilizing the mootools framework. For more information on how to get started with MooTools Accordion Menu, I urge you to read my first MooTools Accordion tutorial as I am going to get straight into how to get it working.
First of all, here is our test.html:
<!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">
<div class="t1">Accordion 1</div>
<div class="t2">
<div class="t3o">Test Content 1</div>
<div class="t3">
<ul>
<li>Sub Content 1</li>
<li>Sub Content 2</li>
<li>Sub Content 3</li>
</ul>
</div>
<div class="t3o">Test Content 2</div>
<div class="t3">
<ul>
<li>Sub Content 1</li>
<li>Sub Content 2</li>
<li>Sub Content 3</li>
</ul>
</div>
<div class="t3o">Test Content 3</div>
<div class="t3">
<ul>
<li>Sub Content 1</li>
<li>Sub Content 2</li>
<li>Sub Content 3</li>
</ul>
</div>
</div>
<div class="t1">Accordion 2</div>
<div class="t2">
<div class="t3o">Test Content 1</div>
<div class="t3">
<ul>
<li>Sub Content 1</li>
<li>Sub Content 2</li>
<li>Sub Content 3</li>
</ul>
</div>
<div class="t3o">Test Content 2</div>
<div class="t3">
<ul>
<li>Sub Content 1</li>
<li>Sub Content 2</li>
<li>Sub Content 3</li>
</ul>
</div>
<div class="t3o">Test Content 3</div>
<div class="t3">
<ul>
<li>Sub Content 1</li>
<li>Sub Content 2</li>
<li>Sub Content 3</li>
</ul>
</div>
</div>
<div class="t1">Accordion 3</div>
<div class="t2">
<div class="t3o">Test Content 1</div>
<div class="t3">
<ul>
<li>Sub Content 1</li>
<li>Sub Content 2</li>
<li>Sub Content 3</li>
</ul>
</div>
<div class="t3o">Test Content 2</div>
<div class="t3">
<ul>
<li>Sub Content 1</li>
<li>Sub Content 2</li>
<li>Sub Content 3</li>
</ul>
</div>
<div class="t3o">Test Content 3</div>
<div class="t3">
<ul>
<li>Sub Content 1</li>
<li>Sub Content 2</li>
<li>Sub Content 3</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
As you can see, there is a “Tier 1″ which expands to show “Teir 2″. And what is nested inside “Teir 2″ but the “Teir 3 Opener” and finally “Tier 3″.
The next thing that needs to be modified from the original tutorial is we need an extra initialization of the mootools accordion within your site.js. This is shown below:
window.addEvent('domready', function() {
var accordion = new Accordion('div.t1', 'div.t2', {
start:'all-closed',
opacity: false,
duration: 100,
alwaysHide: true,
onActive: function(togglers, stretchers){
togglers.setStyle('background-color', '#99ccff');
},
onBackground: function(togglers, stretchers){
togglers.setStyle('background-color', '#6699cc');
stretchers.setStyle('height', stretchers.offsetHeight);
$$('div.t3').setStyle('height','0'); //This closes all sub-accordions.
}
}, $('sidebar'));
var accordion1 = new Accordion('div.t3o', 'div.t3', {
start:'all-closed',
opacity: false,
duration: 100,
alwaysHide: true,
onActive: function(togglers, stretchers){
togglers.getParent().setStyle("height", "auto");
},
onBackground: function(togglers, stretchers){
stretchers.setStyle('height',stretchers.offsetHeight);
}
}, $('sidebar'));
});
I hope that this will give you a base to build upon, mootools is great, and I had to go through a lot of trial and error getting this to work, but if someone finds it useful, that makes it worth it. I am sure there are a bug or two that you will probably find. If you do, report it and I will figure out what to do to fix the issue.
View the Demo | Downloadable Archive
Thank you to Alan and Antonin for insight and fixes to the code.
March 1st, 2008 at 2:46 pm
Hi,
How could I slow down the toggle speed?
Great script, I love it!
March 1st, 2008 at 2:58 pm
In the site.js you can change the “duration: 100″ to a higher number, i.e. “duration: 300″.
Thanks for the comment!
March 1st, 2008 at 3:09 pm
whish I could delete my comment
found it…
March 1st, 2008 at 10:27 pm
Comments are good for me! It helps me to remember that someone can take something I know and utilize the knowledge for their own needs. Take care!
March 4th, 2008 at 4:44 pm
Thanks for this! Just what I needed. Was wondering though, is there a way to have the accordian smoothly close when you click on another accordian item that’s fully expanded? Right now if you expand a tier 2 and then click a different tier 1 to open, it just vanishes rather than just close everything smoothly the way mootools does so well.
April 2nd, 2008 at 6:32 am
Hej, good example!
I was working with mootools for the first time and using nested accordions.
I had everything working fine except the auto size. You saved me some work hours
Although, I think the problem with ‘vanishing’ ones it’s up to height property in firefox.
I’ll try in a couple days to check it again.
Again, thanks for it!
April 2nd, 2008 at 6:45 pm
Yeah I have tried to figure out the ‘vanishing’ issue, but I have not had much time to invest into fixing it. If you do happen to figure it out, post it in a comment or contact me and I will modify the page and add credit where it is due.
Thanks for dropping by!
April 29th, 2008 at 10:31 am
I am interested in having the accordion open with an onLoad() event and then automatically close after a set number of seconds. I really like the usability of your existing accordion, however, the immediate need is for an automatic open/close accordion feature. I hope to hear from you soon. Thank you.
April 29th, 2008 at 10:53 am
Alex,
You can remove this-
start:’all-closed’
-from the first Accordion event and it will automatically have the first main accordion section open.
I quickly tested it in IE7 and it looks as though it creates another bug with some additional whitespace.
If you do the same on the non-nested accordion, it works quite nice. I still a few things I need to look in to in regards to the bugs.
As far as the auto-close by time feature you are looking, I am definitely sure it is possible; it is a matter of integrating it into the functionality via the mootools framework (They have a lot of documentation).
If I can find some time, I will see if I can come up with an answer for you.
May 2nd, 2008 at 3:34 am
Hi Ryan,
i have a bug in the Firefox.
If I open the level 3 ( Sub Point ) and open then an other level 1 there is a jump to see.
I have seen Comment 5 & 6, I think that is the same problem. Have you already fix it or can you help me?
TY *grz nYx
May 8th, 2008 at 10:10 am
I am sorry, I have no fix for it… I was hoping someone could help me figure it out, I just do not have the time right now to fix it.
May 14th, 2008 at 9:51 am
Regarding the vanishing issue I found that if you add:
stretchers.setStyle(’height’,stretchers.offsetHeight);
to the onBackground event of the primary accordion everything will seem to work smoothly.
May 14th, 2008 at 9:54 am
now the last thing to figure out…
If you open a first tier accordion, then open a second tier one, then close the primary (without closing the secondary), re-open the primary, and then close the secondary, the primary container doesn’t resize automatically and space is left. I’ve tried playing with a few things in the onActive and onBackground events, but haven’t had any luck. Anyone else have any ideas?
May 19th, 2008 at 8:26 am
Hello,
big thanks for that script.
I hope i find a response to that alan says, the small bug in the last message.
you can add this in the first accordion;
onBackground: function(togglers, stretchers){
togglers.setStyle(’background-color’, ‘#6699cc’);
stretchers.setStyle(’height’, stretchers.offsetHeight);
$$(’div.t3′).setStyle(’height’,'0′);//you close all sub accordion
}
i try in Safari 3 ,FF 2 on Mac osx
if some try in IE 6 AND 7 to tell me that works?
May 19th, 2008 at 8:55 am
Alan and Antonin, I think those are the fixes we were looking for. I have tested in IE7, seems to work smoothly. I will see if I can get a IE6 install tested.
I will also modify the tutorial and downloadable file with the corrections.
May 19th, 2008 at 10:21 pm
Hi Ryan,
you made the “Hard” of the script, we made the “polish” ahahha.
I have find this to simulate IE6 in IE 7:
Click Here
OR this:
Click Here
with my tips, the close of the accordion is a little big “hard” but we can put a fxStyle to make it smoother
big thanks
May 27th, 2008 at 4:17 pm
This works great
However, is there anyway to put ANOTHER (a fourth) accordion inside the third tier, whilst there are subheadings before and after the 4th tier opener???
So:
Tier 1 Opener
Tier 2 Opener
Tier 3
Tier 3
Tier 4 Opener
Tier 4
Tier 4
Tier 4
Tier 3
Tier 3
Tier 2 Opener
Tier 2 Opener
Tier 2 Opener
June 5th, 2008 at 12:46 am
Hello together,
thanks for this great script!
I´ve got one question:
Is it possible to add several colors to this script? I already tried hard to change the code, but without success. It should look like this:
Tier 1 backgroundcolor: BLACK
Tier 2 backgroundcolor: red
Tier 2 backgroundcolor: white
Tier 2 backgroundcolor: red
Tier 2 backgroundcolor: white
Tier 1 backgroundcolor: GREY
Tier 2 backgroundcolor: red
Tier 2 backgroundcolor: white
Tier 2 backgroundcolor: red
Tier 2 backgroundcolor: white
Tier 1 backgroundcolor: BLACK
Tier 2 backgroundcolor: red
Tier 2 backgroundcolor: white
Tier 2 backgroundcolor: red
Tier 2 backgroundcolor: white
Tier 1 backgroundcolor: GREY
Tier 2 backgroundcolor: red
Tier 2 backgroundcolor: white
Tier 2 backgroundcolor: red
Tier 2 backgroundcolor: white
and so on…
would be nice if someone could help me out! thanks in advance!
Geri
June 5th, 2008 at 7:55 am
You can add multiple classes to each instance.
i.e.
< div class="t1">Accordion 1:< /div>
< div class="t2 black">
< p class="t3o red">Test Content 1< /p>
< div class="t3">Sub Content 1< /div>
< p class="t3o white">Test Content 2< /p>
< div class="t3">Sub Content 1< /div>
< p class="t3o red">Test Content 3< /p>
< div class="t3">Sub Content 1< /div>
< p class="t3o white">Test Content 4< /p>
< div class="t3">Sub Content 1< /div>
< /div>
Then create the css:
.black{
background-color:#000;
}
.white{
background-color:#fff;
}
.red{
background-color:#ff0000;
}
That should be it and thanks for dropping by!
June 5th, 2008 at 12:19 pm
Hi
This example works great but if i link a page to the subcontent and click on the link from my main page the accordion is closed on the subcontent page. How can i get the accordion to stay open on a new page?
would be nice if someone could help me out! thanks in advance!
Wizznie
June 18th, 2008 at 2:00 am
this is great, just what i needed. thankyou very much
June 18th, 2008 at 9:22 am
can you have more than one Sub Content 1
i need to have 3 or 4 but cant get it to work.
Thanks
June 18th, 2008 at 11:36 pm
Peter, I just found this bug you speak of when I was working on a client project. I will post the very large fix for my oversight later today, but I have to get sleep now.
June 19th, 2008 at 9:44 am
I have updated this tutorial to use mootools version 1.2 and added the bugfix when you try to add more than 1 sub-content.
June 21st, 2008 at 7:27 am
Thanks Ryan. I am trying to create a breadcrumb in the accordian menu do you think that is possible. for example if you went to Company> services > Marketing you could set the menu to remain open to act as a breadcrumb on each page?
June 24th, 2008 at 8:09 pm
Hey Ryan,
This is looking like a solid piece of code now, and you did most the work! Thanks for the shoutout though. Now like antonin was saying we need to get some FX going on this to get it looking really snazzy! I may have a project coming up that I can use this on and maybe build upon, I’ll keep you posted.
Best,
Alan
June 24th, 2008 at 9:45 pm
Thanks Alan,
Take a look at this implementation that blows everything I (we) did out of the water:
http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion
His code allows for unlimited nesting, and is much cleaner than mine! =)
Check it out!
July 3rd, 2008 at 8:19 pm
Cheers Ryan! Haven’t had a proper play as yet but wanted to say thanks for all your hard work and also for sharing so the rest of us can learn. MUCH APPRECIATED.
July 7th, 2008 at 6:46 am
Ryan this is really great! - is the Mootools 1.1 version still available? I’m trying to implement something on a site I can’t really upgrade to 1.2 as of yet.
July 7th, 2008 at 9:46 am
Ryan - I was able to modify Bogdan’s code for what I needed!
Thanks though for the great work - it’s really solid and needed!
August 16th, 2008 at 9:52 am
Thanks!! This corrected some issues I had. Gracias!!!!