Creating Accordions with Mootools
I'll be using Mootools.1.11 for these examples. You can download your own version here. These examples assume that you have a good understanding of xhtml, css and javascript.
Helpful Resources
Note: I'm getting many questions about the accordion and they all have answers that can be found here: http://docs.mootools.net/Plugins/Accordion. If I see that your question is something that I know is on this page you're just going to get a link back to this page. Also keep in mind that I am not the creator of mootools. Compatibility issues need to be taken to the Mad4Milk guys.
Basic Usage
<script type="text/javascript" src="file path/mootools.1.11.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var accordion = new Accordion('h3.atStart', 'div.atStart');
});
</script>
This script looks for all h3 elements with class name "atStart" and all div elements with class name "atStart" to create the accordion effect. The class name doesn't have to be "atStart", it can be whatever you want it to be. It doesn't even have to be an h3. You could use an anchor tag or a list item.
CSS
JavaScript does not affect the look of the accordion, CSS does. I'm going to say it one more time because it's the most asked question that I get so, JavaScript does not affect the look of the accordion, CSS does.
You accordion is made up of at least 2 elements. It does not matter where those elements are on the page. They don't have to come directly after the other. So, if you want to create a tab like accordion the place all the accordion togglers together and float them left, then after that put all the elements that contain the accordion content.
A Little Fancier
The accordion documentation page has lots of good information and examples of options you can use with your accordion. This can help you create lots of fun and interesting variations of the accordion.
<script type="text/javascript" src="file path/mootools.1.11.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var accordion = new Accordion('h3.tab', 'div.tab', {
onActive: function(toggler) {
toggler.setStyles({
background: '#d53043',
color: '#fff'
});
},
onBackground: function(toggler) {
toggler.setStyles({
background: '#eee',
color: '#222'
});
}
});
});
</script>
posted Jul 13, 10:58 PM |
commenting closed for this article