30 Days of Mootools 1.2 Tutorials - Day 17 - Accordion

Mootools 1.2 Accordion Tutorial

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.

The Basics

Creating a new accordion

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:

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

Options

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:

display

Default is 0

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
});

show

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
});

height

Default is true

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
});

width

Default is false

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 
});

opacity

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
});

fixedHeight

Default is false

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
});

fixedWidth

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 
});

alwaysHide

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
});

Events

onActive

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');
	}
});

onBackground

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');	
	}
});

onComplete

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'); 
	}
});

Methods

.addSection();

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();

.display();

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

Example

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.

add section
display section

Quirks

• .display will recognize the index, but if you use addSection, that section will be the last index
• if you use “fixedHeight,” “show” will not work on page load, but “display” works fine

More Accordion options, events and methods

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.

To Learn More…

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.

Download a zip with everything you need to get started

Including the Mootools 1.2 core and more libraries, a simple html file, an external javascript file, a css style sheet and the example you see above.

Tomorrow’s tutorial

Classes, part 1

Questions, Comments, Suggestions

Drop us a note if you have any questions or anything to add. Thanks and hope you find this useful.