Seattle web design, development and marketing: consider the possibilites

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.

onComplete

onActive

onBackground

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

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.

Tags: 30 days of mootools, accordion plugin, javascript, Mootools 1.2, tutorials

This entry was posted on Wednesday, September 3rd, 2008 at 9:28 pm and is filed under Mootools 1.2, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

27 Responses to “30 Days of Mootools 1.2 Tutorials – Day 17 – Accordion”

benjamin says:

September 4, 2008 at 7:27 am

Again, this is great.
I’ve been learning so much from these mootorials.
Here’s other moo effect that I would love to learn how to achieve. How about setting up tabs? Something using 3 tabs to switch between 3 different divs of content.
Just a thought…and kind of a wish as well.
Thanks again!

Reply
Tim B says:

September 4, 2008 at 6:33 pm

Earlier, you asked for tutorial suggestions. I would like to suggest that you focus a tutorial on debugging, perhaps with Firebug.

I’ve been toying around, and have gotten stuck repeatedly. For example, I didn’t realize that if one function call doesn’t work, other functions beneath it also won’t work. (At least, that’s what happened with me.)

Thank you for this excellent tutorial series; I’m on lesson 7 and learning a lot.

Reply
Troy says:

September 5, 2008 at 7:35 am

@1 benjamin, we have a “tabs” day planned already (its actually pretty much written also, just needs a few tweaks).

@2 That’s a really good idea, Tim. There are definitely a few things to know that could be very helpful. We’ll see about putting some tips together.

Reply
Matt says:

September 16, 2008 at 1:18 pm

Is there a way to have the 1st element not transition open when you first arrive but rather stay closed until toggled like the additional elements below it?

Reply
Troy says:

September 16, 2008 at 4:46 pm

There is old forum topic where someone extended the class to allow for that kind of behavior, but it was for v1. Heres that link: http://forum.mootools.net/viewtopic.php?id=2713

There may well be a simpler way integrated into the 1.2 build that i don’t know about. I’ll keep an eye out and drop a comment if I come across anything.

Reply
Matt says:

September 16, 2008 at 6:24 pm

Thx Troy, I went to that forum link and found that all you need to do is add start: ‘all-closed’. I added it here and it works:

alwaysHide: true,
start: ‘all-closed’,

Reply
Léonie says:

November 9, 2008 at 10:26 am

Do you know, how to program the buttons “expand all” and “collapse all” with mootools 2.1 ?

Reply
David Bernad says:

November 11, 2008 at 1:55 am

I have a problem. Someone can help me?

Why don’t I add a toggler without elements? I’m trying it but all togglers must have elements (childs), and a toggler without children makes not work the acordion.

Thanks in advance.

Reply
Troy says:

November 11, 2008 at 4:59 pm

David, you will need both the toggler and the content element for the accordion to work.

Reply
Kate says:

December 10, 2008 at 10:01 am

First, thanks for the tutorials. Very clear. Second, I could be wrong, but I think you need a comma after \var AccordionObject = new Accordion(toggles, content\ in the examples. (I see it in the finished code but not in the individual statements.) Anyway, thanks again! : )

Reply
Troy says:

December 10, 2008 at 7:06 pm

I’m sorry Kate, I don’t see exactly what you are referring to. Could you post more specifically so I can fix the error? Thanks much

Reply
David Bernad says:

December 16, 2008 at 8:28 am

Thank you for you answer.

For do what i want, we can make that accordion closes manually with the onclick event in elements without children. I don’t know if you are understanding me.

Now I’m having another problem.
One toggler element can only have one child?

Reply
Troy says:

December 16, 2008 at 1:22 pm

David,

I don’t think there is a way to do it with the accordian object, but you could always use Fx.Slide.

Reply
Jim says:

January 5, 2009 at 10:51 am

Is there a way to control the transition speed?

Reply
minghong says:

January 13, 2009 at 12:18 am

Jim, you can use options for Fx to control the speed:
http://mootools.net/docs/Fx/Fx

Reply
sasa says:

April 18, 2009 at 7:51 am

Hello.
I’m trying to create two accordions side by side (with the info from the demo on mootools.net) and on loading the page, the second accordion “unravels” like the first, but the “onbackground” sections never appear. Does a second accordion require a little bit more knowledge than simply renaming the divs? I’d appreciate any response. I think the people at MooForum are snubbing me for my noobness.

Reply
Troy says:

April 18, 2009 at 4:02 pm

Sasa – without seeing what you are working on it’s hard to say what the problem is, but there is nothing special you need to do to get two accordians, aside from make sure that the things that have to be unique are unique. If you could post a link or paste.mootools.net your code, I could probably tell you more.

Reply
sasa says:

April 19, 2009 at 5:41 am

Troy, I greatly appreciate your reply.
I just put the javascript in paste.mootools.net under “zuzushii.” If you need other info, let me know.

Reply
PixelMaker says:

June 29, 2009 at 11:16 am

Hi,

I want to display dynamic content which is associated with an UNIQUE ID in the database. I want to use Ajax call and pass that unique ID (I know the ID while rendering the sections itself).

Can you please describe (or give a sample code) how to that?

Thanks.

Reply
jamland says:

July 13, 2009 at 1:07 am

Thanks you. It’s very helpful

Reply
JohnJ says:

July 13, 2009 at 9:43 am

Was just wondering, is there an easy way to have the accordian react to mouseenter rather than mouseclick?

Reply
MooTools Tutorials and Resources Round-Up « Tech7.Net says:

July 28, 2009 at 5:16 pm

[...] Accordion [...]

Reply
MooTools Tutorials and Resources Round-Up » Shai Perednik.com says:

July 28, 2009 at 11:07 pm

[...] Accordion [...]

Reply
MooTools??????????? | CssRainBow.cn says:

August 13, 2009 at 12:21 am

[...] Accordion [...]

Reply
MooTools???????????? | CssRainBow.cn says:

October 18, 2009 at 1:36 am

[...] ????? [...]

Reply
Dave says:

December 28, 2009 at 3:18 pm

I am having a really hard time getting my code to work in IE7 and IE6. If anyone has a second to check out my site, i’d love to hear your feedback. Thanks very much! The Accordian boxes all appear open, with no movement at all. The error I get from IE7 is “Expected Identified, srting or number” on line 66, Char 1.

http://www.getspecialized.com/services.htm

I removed the code from the page that had to do with changing the colors of the elemnts, but I dont think I missed anything. The code is working well in IE8, FF, and Chrome.

Thanks very much for your help!

Reply
F1Alien says:

April 27, 2010 at 11:39 am

is there an code for “expand all” and “collapse all” buttnons?

Reply

Individual and
Team Mootools
training.

Contact Us

Our Services

Design

Development

Marketing

Client Testimonials

30 Days of Mootools 1.2 Tutorials – Day 17 – Accordion

Mootools 1.2 Accordion Tutorial

The Basics

Creating a new accordion

Toggle 1

Toggle 2

Toggle 3

Options

display

show

height

width

opacity

fixedHeight

fixedWidth

alwaysHide

Events

onActive

onBackground

onComplete

Methods

.addSection();

.display();

Example

Quirks

More Accordion options, events and methods

To Learn More…

Download a zip with everything you need to get started

Tomorrow’s tutorial

Questions, Comments, Suggestions

27 Responses to “30 Days of Mootools 1.2 Tutorials – Day 17 – Accordion”

Leave a Reply

Individual and Team Mootools training.

Contact Us

Article Categories

Our Services

Design

Development

Marketing

Client Testimonials

30 Days of Mootools 1.2 Tutorials – Day 17 – Accordion

Mootools 1.2 Accordion Tutorial

The Basics

Creating a new accordion

Toggle 1

Toggle 2

Toggle 3

Options

display

show

height

width

opacity

fixedHeight

fixedWidth

alwaysHide

Events

onActive

onBackground

onComplete

Methods

.addSection();

.display();

Example

Quirks

More Accordion options, events and methods

To Learn More…

Download a zip with everything you need to get started

Tomorrow’s tutorial

Questions, Comments, Suggestions

27 Responses to “30 Days of Mootools 1.2 Tutorials – Day 17 – Accordion”

Leave a Reply

Individual and
Team Mootools
training.