30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
If you haven’t already, be sure and check out the rest of the Mootools 1.2 tutorials in our 30 days series.
Continuing with our “more” library plugin tutorials, today we are going to look at maybe the most popular plugin, accordion. Creating and configuring the basic accordion is simple, but be sure to read through carefully, as the more advanced options can be a little tricky.
To create a new accordion you are going to need to select pairs of elements—the title and the content. So first, assign a class to each title and a class to each content element:
<h3 class="togglers">Toggle 1</h3> <p class="elements">Here is the content of toggle 1</p> <h3 class="togglers">Toggle 2</h3> <p class="elements">Here is the content of toggle 2</p>
Now, we can select all elements with the class “togglers” and all elements with the class “elements,” throw them into vars, then initiate a new accordion object.
var toggles = $$('.togglers');
var content = $$('.elements');
//set up your object var
//create a "new" Accordion object
//set the toggle array
//set the content array
var AccordionObject = new Accordion(toggles, content);
The default for setting for the accordion will give you something that looks like this:
Here is the content of toggle 1
Here is the content of toggle 2
Here is the content of toggle 3
Of course, if you want something other than the default accordion, you are going to need to adjust the options. Here we will go through each one:
This option determines which element shows on page load. The default is 0, so the first element shows. To set another element, just put in another integer that corresponds to its index. Unlike “show,” display will transition the element open.
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});
Much like “display,” show determines which element will be open when the page loads, but instead of a transition, “show” will just make the content display on load without the transition.
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});
When set to true, the content will show with a height transition. This is the standard accordion setting you see above.
var AccordionObject = new Accordion(toggles, content {
height: true //default is true
});
Like “height,” but instead of transitioning the height to show the content, it will transition the width. If you use “width” with a standard set up, like we used above, then the space between the title toggle will stay the same, based on the height of the content. The “content” div will then transition from left to right to display in that space.
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});
Default is true
This option sets whether or not to show an opacity transition effect when you hide and display content. Since we are using the default options above, you can see the effect there.
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});
To set a fixed height, you can set an integer here (for example, you could put 100 for content 100px tall). This should be used with some kind of CSS overflow property if you are planning on having a fixed height smaller than the contents natural height. Works as you would expect, thought it does not seem to register is you use the “show” option when you first load the page.
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});
Just like “fixedHeight” above, this will set the width if you give this option an integer.
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //default is false
});
This option lets you add a toggle control to the titles. With this set to true, when you click on an open content title, it will close that content element without opening anything else. You can see this in action in the full example below.
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //default is false
});
This will fire when you toggle open an element. It will pass the toggle control element and the content element that is opening and parameters.
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
}
});
This will fire when an element starts to hide and will pass all other elements that are closing, but not opening.
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
}
});
This is your standard onComplete event. It passes a variable containing the content element. There may be a better way to get these, if anyone knows, drop a note.
var AccordionObject = new Accordion(toggles, content {
onComplete: function(one, two, three, four){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
}
});
With this method, you can add a section (a toggle/content element pair). It works like many of the other methods we have seen. First refer to the accordion object, tack on .addSection, then you can call the id of the title, the id of the content, and finally state what position you want the new content to appear (0 being the first spot).
AccordionObject.addSection('togglersID', 'elementsID', 2);
Note: When you add a section like this, though it will show up in the spot of index 2, the actual index will be be +1 the last index. So if you have 5 items in your array (0-4) and you add a 6th, its index would be 5 regardless of where you add it with .addSection();
This lets you open a given element. You can select the element by its index (so if you have added an element pair and you want to display it, you will have a different index here than you would use above.
AccordionObject.display(5); //would display the newly added element
Here we have a full featured accordi0n utilizing all of the events and methods we see above, as well as many of the options. Check out the live example and cross reference with the code to see how everything works.
//send the toggle and content arrays to vars
var toggles = $$('.togglers');
var content = $$('.elements');
//set up your object var
//create a "new" Accordion object
//set the toggle array
//set the content array
//set your options and events
var AccordionObject = new Accordion(toggles, content, {
//when you load the page
//will "show" the content (by index)
//with NO transition, it will just be open
//also note: if you use "fixedHeight,"
//show will not work when the page first loads
//"show" will override "display"
show: 0,
//when you load the page
//this will "display" the content (by index)
//and the content will transition open
//if both display and show are set,
//show will override display
//display: 0,
//defaults to true
//this creates a vertical accordion
height : true,
//this is for horizontal accordions
//tricky to use due to the css involved
//maybe a tutorial for another day?
width : false,
//defaults to true
//will give the content an opacity transition
opacity: true,
//defaults to false, can be integar -
//will fix height of all content containters
//would need an overflow css rule
//wont work on page load if you use "show"
fixedHeight: false,
//can be false or an integer
//similiar to fixedHeight above,
//but for horizontal accordions
fixedWidth: false,
//lets you toggle an open item closed
alwaysHide: true,
//standard onComplete event
//passes a variable containing the element for each content element
onComplete: function(one, two, three, four, five){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
five.highlight('#5D80C8'); //the added section
$('complete').highlight('#5D80C8');
},
//this will fire when you toggle open an element
//will pass the toggle control element
//and the content element that is opening
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
$('active').highlight('#76C83D');
},
//this will fire when an element starts to hide
//will pass all other elements
//the one closing or not opening
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
$('background').highlight('#DC4F4D');
}
});
$('add_section').addEvent('click', function(){
//the new section is made up of a pair
//(the new toggle ID and the corresponding Content ID)
//followed by where you want to place it in the index
AccordionObject.addSection('togglersID', 'elementsID', 0);
});
$('display_section').addEvent('click', function(){
//will determine which object displays first on page load
//will override the options display setting
AccordionObject.display(4);
});
Here you can see when the various events fire.
Try adding the a new section with the button below.
Toggle 1
Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1
Toggle 2
Here is the content of toggle 2
Toggle 3
Here is the content of toggle 3
Toggle 4
Here is the content of toggle 4
Toggle Add
Here is the content of toggle 4
Accordion extends the Fx.Element class, which extends the Fx class. You can use the various options in these classes to further refine your accordion. Though it performs a simple task, the accordion is a useful and powerful plugin. I would love to see any examples of people really pushing what it can do.
Check out the docs sections on accordion, as well as Fx.Elements and Fx. You can also see the accordion at the Mootools official demos.