Accordion menu with Mootools
Here is what we'll do. You first have to download mootools.js.
Let's take care of the HTML codes for the menu first...
<div id="accordion">
<h1 class="toggler">Lorem</h1>
<div class="stretch">
<p>Text 1 goes here</p>
</div>
<h1 class="toggler">Ipsum</h1>
<div class="stretch">
<p>Text 2 goes here</p>
</div>
</div>
Now let's link the script to your page, add this code between head tags:
<script src="mootools.js" type="text/javascript" language="JavaScript"></script>
Now, we need to write the javascript to make your accordion menu. Add it directly to your source in the head part:
<script type="text/javascript" language="JavaScript">
window.addEvent('domready', function() {
var accordion = new Accordion('h1.toggler', 'div.stretch', $('accordion'));
});
</script>
You're done! Test it and style it with CSS now!
Accordion menu sample files (21.8 KB, 2,442 hits)
9 Responses to “Accordion menu with Mootools”
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)
Is there a way to stop this from automatically opening till clicked? Im using it for a menu and the first one just pops open automatically.
Why use a h1 tag?
Btw, is there a way to show which h1 tag is active...?
Daniel: Please refer to this post in mootools forum :) You need to use "alwaysHide"
Andrew: You can use any tag you want, just replace h1 by your tag :) To add style to the active h1, you need to use "onActive". Please refer to this post in mootools forum too! :)
Thanx, I had already answered my first question, I hadn't really looked at the inline javascript bit...o_O.
Being a javascript noob the second problem will take some (read: a lot) more research :)
I was wrong is was pretty easy :D
<script type="text/javascript" language="JavaScript">
window.addEvent('domready', function() {
var accordion = new Accordion('a.toggler', 'div.stretch',
{
onActive: function(toggler, element)
{
toggler.setStyles({'property': 'value'});
},
onBackground: function(toggler, element)
{
toggler.setStyles({'property': 'value'});
}
}, $('accordion'));
});
</script>
Thanks! This was a big help. For some reason I was having trouble getting the accordion to work with the files I downloaded from the MooTools site, but this worked perfectly! :)
The text looks great but when it slides the text gets blotchy and think.
How to fix this?
ty
Hi.
This accordion is fantastic !!
But I have a question : how can we open everything? And then close everything ?
Thank you all.
How do you use a image divider instead of customizing text?