MooTools 1.1 Tutorial

Update: Mootools has since moved on from version 1.1, the version for which this tutorial was written. You can still learn the basics of MooTools by reading this tutorial, but be advised that some of the code examples may be out of date with the current version of MooTools. We will be publishing up to date tutorials in our tutorials section, so check back often.

MooTools is a JavaScript library that can be used to manipulate parts of your web page, dynamically transmit data without reloading the page, and it also provides numerous effects, transitions, and user interface tools. This tutorial covers some of the basics for working with MooTools version 1.11, although it should also apply to version 1.2 as well. If you don't know JavaScript yet, you'll pick up many of its basic concepts by reading through to the end.

What exactly is a JavaScript library? JavaScript is a powerful programming language, but it can be difficult to understand and implement. MooTools is a collection of files written with JavaScript and it extends the functionality of the language and also provides shortcuts for performing certain tasks.

There are many JavaScript libraries available such as Prototype, YUI, and JQuery, but it is important to note that MooTools is not compatible with them. This means that if you include MooTools with another library, chances are that your page isn't going to function in the correct manner. So if you want to use MooTools, you're going to have to use it exclusively.


This tutorial assumes a working knowledge of HTML and CSS. Knowledge of JavaScript is also useful, but not required. To do the exercises contained in this tutorial, you will need to download the full MooTools Library from here.


The documentation on the MooTools site can be a little difficult to understand, especially if you are new to the world of JavaScript. Each document contains the name of the JavaScript file, the name of the classes that are contained within that file, the arguments, options, and events associated with each class; and the properties that can be used for that class.

Getting Started

There are a few basic notes to cover as we get started. We'll cover these in more detail and with examples as we move forward.

JavaScript is case-sensitive, so it's important to make sure that you match case exactly.

MooTools requires an XHTML doc type.

Include the MooTools JavaScript file in the <head> section of your document.

Include the actual coding in the <body> section of your document. Do this by adding the <script type="text/javascript"></script> tags and including your coding in between the tags.

Code commenting is easy in JavaScript. If you want to comment-out a single line, use two forward slashes, //, at the beginning of that line. If you would like a block quote covering multiple lines, use a forward slash followed by an asterisk, /*, at the beginning of the quote and an asterisk and a forward slash, */, at the end of the quote.

Almost all MooTools applications will require the following code within the body script tags:

window.addEvent('domready', function() {
//Your code here

Think of these as opening and closing tags (like in HTML). You will insert your code in between the braces: {your code}.


If you wanted to make a toy in the shape of a cow, you would pour hot plastic into a cow- shaped mold. In MooTools, you can think of a 'class' as a mold. Using a class will help you create an object with the characteristics of that class. This is usually done by creating an object and setting it equal to a new instance of a class. I'll show you how do that in a little bit further down.

An important thing to note: Pure JavaScript has no classes; it is the MooTools library that creates this functionality.


Sticking with our toy cow analogy, arguments are the ingredients that get poured into the mold. If we wanted a blue plastic cow, we would put blue dye and plastic into the mold. The class arguments in MooTools are similar to ingredients and they come in two flavors: required and optional. Usually the arguments will consist of either an HTML tag, tag id, or tag class. The argument can also refer to a variable.


Suppose we also wanted to give our toy cow a personality. We would insert computer chips inside of it and then we would program instructions into the computer chip to tell it how to behave. In the same way, the options in MooTools tell the class how it should behave. The set of options for each class is a special type of argument and it is usually optional to include it. The options can control a lot of different things depending on the class, including: height and width properties, transition states and effects, color, opacity, etc.


If we wanted our cow to be able to react to the world around it, we would give it programming to tell it how to respond if it gets poked in the eye or has its tail pulled. In MooTools, events are similar. There are two parts to each event: 1) The event itself, which is also called a trigger; 2) The action that should be performed once the event has been triggered. The action usually takes the form of a function, which we'll talk more about a little later.

Moo-ving On

Those are some of the basic concepts that you'll need to start working with MooTools. You also can string objects together and insert functions and even other objects inside objects, but we'll cover more advanced concepts as we run across them, but for now, we're going to dive into some examples.

Example One: Accordion

An accordion is one or more html elements that expand and collapse when clicked on. Although I'm sure there are many more examples, some common uses for accordions are menus with many items and FAQ sections.


Before we move on, it should be pointed out that accordion.js is only one file in the MooTools library. For accordion.js to work properly, it also needs some other MooTools files. The dependencies for accordion.js are numerous: core.js, class.js, class.extras.js, array.js, string.js, function.js, number.js, element.js, element.event.js, fx.base.js, fx.css.js, and fx.elements.js.

Fortunately, you don't need to figure all of this out. On the MooTools site, when you click to download the accordion.js file, the rest of the files are automatically selected and included as well. MooTools did this so that their forums don't get clogged up with questions because people didn't remember to include all of the dependent files on their website.

The accordion.js file includes the Accordion class. The Accordion class takes two required arguments, togglers and elements, and options are the optional third element.


A toggler is the trigger or button that activates the accordion. When the toggler is first clicked, it will expand the element. Depending on what options are enabled, clicking on it again will close the element.


An element is the area expanded or contracted by the toggler.

Example 1.1

For this first example, I'm going to include the complete code required, including the document type, head, and body of the html file. In subsequent examples, I'll just be writing within the body tag for the sake of brevity, but you should include the rest of it as well. The following code is a simple example of what we would write for a basic accordion without any options:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MooTools Tutorial</title>
<script type="text/javascript" src="/javascript/mootools-release-1.11.js"></script>

<div id="menu">
	<div class="text">Menu 1</div>
	<div class="links">
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
	<div class="text">Menu 2</div>
	<div class="links">
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>			

<script type="text/javascript">
window.addEvent('domready', function() {
	var myMenu = new Accordion('div.toggle', 'div.element');

This is obviously a very basic example, badly in need of some CSS styling, but I'll let you handle that part. Let's break down the example a little more so that you can understand it fully.

I used the <div> tag for this example, but you can really use almost any tag (including form elements!) you want for both the toggler and the element. The important thing is that you set either the id (if you only want one accordion element) or the class (if you want multiple accordion elements) for the toggler and the element.

In this case, in my HTML body, I set the class for the division that I wanted to act as a toggler to 'text' and I set the class for the division that I wanted to act as an element to 'links'. I didn't nest the element division within toggler division, but it still works if you nest the element within the toggler, just not vice versa.

I've put my JavaScript at the bottom of my document, right before I closed the <body> tag because it helps the document appear to load faster. When the browser reaches a <script> tag, it won't render any more HTML until all of that script has loaded. You can move the <script> tag that calls the mootools-release-1.11.js in the header to the bottom of the body as well, but be warned that your page will appear to load with your accordion completely expanded until the file loads completely.

Within my <script> tag, you can see that I added the code that we talked about earlier in the tutorial:

window.addEvent('domready', function() {

With few exceptions, all of your code should go in between the braces, {}. In this case, we inserted the following code:

var myMenu = new Accordion('div.text', 'div.links');

With var, we are creating a new variable (which is also an object) called 'myMenu'. We are giving it the value of a new instance of the Accordion class. Then we pass it the arguments for the toggler and the element. For myMenu, the toggler is any HTML division with the class of 'text' and the element to be toggled is any HTML division with the class of 'links'. If we wanted to expand our scope to include any HTML tag with the class of 'text', we would replace 'div.text' with '.text'. Then we could set an <h3 class="text"> to become a toggler as well as a <div>. If we want to use an id instead of a class, we would simply write 'div.text' as 'text'. Keep in mind, however, that you should only use this if you want only one toggler.

Now that we've created a basic accordion, let's suppose that you want to create to change the way it functions. To do that, we're going to play with some of the options. Before we start playing, however, we need to discuss arrays and objects.


If you've ever worked with Microsoft Excel or a similar spreadsheet program, you'll probably catch onto arrays quickly because an array is similar to a spreadsheet. An array has two columns. The first column is called the index, the second is called the key. Each row contains the index, which can be a number or a string, and the key, which is the value of the index. The key can contain a number, a string, a function, an object, or even another array.

The default type of array is numeric and instead of starting at one, arrays always start at zero. That means that if you have an array of three items, the numerical values for the indices are going to be: [0, 1, 2].

Technically, an array is an object, so, while we're at it, let's talk about objects.


Objects are the key to JavaScript. Almost everything in JavaScript is an object, but what is an object, exactly?

Douglas Crockford, who works at Yahoo, describes an object as "an unordered collection of name/value pairs...every object is a little database." Put even simpler, an object is a container for information.

The way that an object stores information is similar to the way an array does, although we write it out a little differently. The name/value pairs that Crockford talks about are similar to an index and a key.

The way that an object is denoted is by writing the object name, myMenu, for example, followed by opening and closing braces, {}. Each name and value is separated by a colon, ':'. Each name/value pair is separated by a comma, except the last pair has no comma.

Values in an object can contain another object, a class, a function, a number, or a string.


Now we're ready to talk about the options in MooTools. The options are name/value pairs and are written inside of an object. The object that contains the options is passed as an argument, just like toggler and element were in our basic example.

One important note to remember is that the options are case-sensitive, so if you get the case wrong, you'll get an error.

The following options are available for the accordion:

  • show - the value for show should be the integer of the index of the div we want to have open when the page loads. The way MooTools does this is it finds each instance of your toggler and element combination and puts them into a numbered array, starting with 0. So if you want the second toggler and element combination to be open when the page loads, you would set show equal to 1. The default value for show is 0.
  • display - display works the same way as show, except that it adds a transition effect to the toggler/element combination. If you have different values for show and display, only the element whose index number is the value for show will be open on page load and it will not have a transition effect applied to it. The default value for display is 0.
  • fixedHeight - the value for fixedHeight should be an integer and the integer is measured in pixels. fixedHeight defines the height of your element and it overrides the CSS height property if you have it set. Its default value is false, which means that the height for the element is determined through CSS rather than by MooTools.
  • fixedWidth - fixedWidth works the exact same way as fixedHeight, except in controls the width property of the element.
  • height - the value for height is boolean, which means that it is either true or false. height adds a vertical transition effect when an element is opened. The default value for height is true.
  • opacity - opacity will add a transition effect to the element opening that fades from the background color to the color of the element. The value for opacity is boolean and the default value is true.
  • width - width functions the exact same way as height except that it is trickier to implement. You will need to employ some complex CSS in order to create a horizontal accordion. Because of the degree of difficulty, the default value for width is set to false.
  • alwaysHide - alwaysHide enables you to have all of the elements closed at the same time, but it does not hide automatically hide all elements on page load. Its values are boolean and the default is set to false.

Are you ready to try out the options? I won't include all of the options in this example (you can add more on your own), but here is the way that it would be coded if you wanted to include some:

Example 1.2

<script type="text/javascript">
window.addEvent('domready', function() {
	var menu = new Accordion('.text', '.links', {
		display: 1,
		fixedHeight: 300,
		alwaysHide: true

This bit of JavaScript code should give us an accordion that has the second element open with a transition on page load. Each element should also have a height of 300 pixels and we should be able to close all of the elements at the same time.

I only included the <script></script> tags that go in the bottom of the document body for this example, but we didn't change anything else from the previous example, so we should still be okay. Again, notice how the options argument is enclosed in braces, {}. Also, each name and value is separated by a colon and each name/value pair (except for the last pair) is separated by a comma.

Functions and Methods

In JavaScript, functions are the bits of code that actually do something; they perform an action. Functions are also objects, so they have all of the same characteristics that objects do. A function should always be followed by parentheses, (), even if they are empty. A function can take arguments (arguments can also be referred to as parameters), which are placed inside of the parentheses and are separated by commas. A function can also have a set of braces, {}, after the parentheses, in which a block of statements can be placed.

If you'll take another look at our code above, you'll find that our Accordion class is actually a function, as is the initial addEvent and the function(). Since classes are not native to JavaScript, MooTools creates them by using functions.

You'll see in some of the MooTools documentation that the properties of each class are called methods. When a function is placed within an object, it is called a method. When an object's method is referred to, it simply means the function within the object.


We talked a little about events before, but let's get even more in-depth. An event on a web page is when a user performs an action with either the mouse or keyboard. JavaScript has the following built-in events:

Mouse Events

  • click
  • dblclick
  • mousedown
  • mousemove
  • mouseout
  • mouseover
  • mouseup

Keyboard Events

  • blur
  • change
  • focus
  • keydown
  • keypress
  • keyup
  • reset
  • submit

MooTools uses JavaScript events, but it has also created its own custom events. The Accordion class has two custom events, onActive and onBackground. These custom events are written the same way the options are, as name/value pairs. In the case of the events, however, the name is the event and the value is the function that should be executed when the event is triggered.

  • onActive - When an element is toggled active, or shown, the function value for onActive will be shown.
  • onBackground - When an element is toggled hidden, or in the background, the function value for onBackground will be shown.

Let's take a look at an example.

Example 1.3

<script type="text/javascript">
window.addEvent('domready', function() {
	var menu = new Accordion('.text', '.links', {
		display: 1,
		fixedHeight: 300,
		alwaysHide: true,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#CCC');
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#000');

This example should set the color of the toggler's text to light gray when that toggler's element is open and it should turn the text back to black when the element is closed. We'll continue examining this example in more detail, but first we need to discuss scope and inheritance.


If you review when we first created the Accordion class, you will see that the Accordion class also had the arguments of 'toggler' and 'element'. When we created the variable menu, we set it equal to a new Accordion class and filled in the 'toggler' argument with the HTML class 'text' and the 'element' argument with the HTML class 'links'. In creating a function as the value of onActive and passing it the arguments of 'toggler' and 'element', that function will automatically receive the same values as the Accordion class did for its arguments.

In fact, as long as we are inside of the braces for the Accordion class, we can use 'toggler' and 'element' to refer to the values of the arguments given to the Accordion class. In the case of the menu object, those values will be '.text' and '.links'. However, 'toggler' and 'element' would not carry the values of outside of the menu object. This is an example of scope.

Scope describes the availability of the value(s) of an object. Generally, an object only has access to the variables, functions, and objects of the objects that contain it. It does NOT, however, have access to the variables, functions, and objects of the objects that it contains. The exception to this rule is when an object is declared to be global.


Inheritance is a key concept in JavaScript and it can save you from writing a lot of extra code. It's also one of the things that MooTools does best.

Let's go back to our toy cow example. Suppose we also wanted to create a toy pig and a toy horse. Now, let's also say that the only difference between the cow, the horse, and the pig is that a different head is placed on each. We could manufacture the toy animal bodies all from the same mold and then manufacture a head for each animal from different molds. We would then have three different kinds of toy animal with different heads, but a body from the same mold.

JavaScript works much the same way. Instead of creating a toy animal body, we create an object prototype. We then can create other objects (like the cow, horse, and pig) by using the object prototype as a basis and then building on it. If we made an object called cow, it would inherit all of the methods (remember, methods are just the term for functions inside of objects) from the body object, plus it would have it's own unique cow methods. This is called inheritance.

Our cow object wouldn't affect the methods of the body object or even the horse or pig objects. However, making a change to the body object would change the cow, horse, and pig objects. This is because the body object is the parent of the cow, horse, and pig objects, which are referred to as children. The parent object affects its children, but not vice versa.

How does all of this relate to MooTools and our accordion? Well, remember when we listed all of the dependencies of the accordion.js file? That's because the Accordion class is a child object of other classes contained in those other JavaScript files. Because the Accordion class is based on other classes, it also inherits their methods.

In the case of our Example 1.3, we used the method setStyle from the Element class, which can be found in element.js. This method allowed us to change the font color for our 'toggler' argument. The way that we told the setStyle method to the 'toggler' argument is we connected them with a period:


However, setStyle also has some arguments of its own, so we included those in parentheses after it. In this case, we told it that we wanted to change the color and we gave the Hexadecimal code for the color:

toggler.setStyle('color', '#CCC');

It's important to remember that we need to enclose our arguments inside quotation marks. Again, arguments should be separated by commas and our whole statement should end in a semi-colon. You should also note that we didn't include our function as part of a name/value pair.


As you work with JavaScript, you will hear a lot about DOM. DOM is an acronym for Document Object Model, something you've been working with all along, even if you didn't realize it. DOM simply refers to the structure of your HTML, XHTML, or XML document and is usually represented in a tree or flowchart format.

In HTML, each tag is considered a DOM element. <html> is a parent element, <head> and <body> are both children of <html>. <head> and <body> are also siblings of each other. Each child DOM element can also have its own children.

One of JavaScript's main functions is to manipulate the DOM by adding, deleting, or changing some aspect of the DOM. By building our accordion, we've alternately revealed and hidden each division with the class of 'element', even adding animation to ease the transition.

MooTools has a special way of loading JavaScript once the HTML DOM has been downloaded (before any images are retrieved). We've also been using this bit of code all along:

window.addEvent('domready', function() {
//Your code here

You'll probably start to recognize the format, but let's break it down anyways.

In browsers, 'window' refers to the global object (the object that contains all other objects). We are appending the method, 'addEvent', to the 'window' object by using a period. 'addEvent' has a MooTools-specific event argument called 'domready'.

Once the DOM tree has been downloaded, but before any images have been retrieved, the DOM is considered ready. If 'domready' is satisfied, the JavaScript within the function argument will be downloaded and executed.

The $() function

The $() is a very useful function that allows you to specify an DOM element by its ID. Our example code has only one DOM element with an ID, the 'menu' division, but it should be enough to illustrate what $() does.

If we wanted to refer directly to 'menu', we would use the $() like this:


The $() function has only one argument, the ID of a specific DOM element, and it must be a sting enclosed by quotation marks like our example above.

By being able to specify a particular DOM element by ID, we can assign various methods to it as well. For example, if we wanted to use addEvent, we would write:

$('menu').addEvent('mouseover', function(){
	//Insert your function here

The above bit of code will add an event whenever the mouse passes over the 'menu' division. We'll make a working example in just a little bit.

The $$() function

While the $() is useful, it doesn't do everything we might need it to do. If we wanted to apply a method to a class or multiple DOM elements, we wouldn't be able to use $() because it is tied to an ID, which must be unique. This is where the $$() function comes in handy.

$$() allows us to select a single or multiple classes, one or more DOM elements, and multiple element IDs. It accepts unlimited arguments, but each argument should be in string form, surrounded by quotation marks. If you wish to specify a class, you must include the period before the class name.

Both $() and $$() are major reasons why MooTools is incompatible with other JavaScript libraries as some of those libraries also use them, but in a slightly different manner. This creates a namespace conflict.


We've already seen a few properties in our example code, but let's formally introduce them. Properties are what MooTools calls methods. For example, 'setStyle', which we saw earlier, is a property of the 'Element' class.

There are two properties that are specific to the Accordion class, 'addSection' and 'display'.


The 'addSection' property allows you to add a section to your accordion after you have already created it. This could be useful if your part of your accordion is dynamic. 'addSection' has three arguments: toggler, element, and pos.

You probably already can guess what the first two arguments do, but we'll review them anyways. The toggler argument is the DOM element that shows and hides the element. The pos argument should always be an integer and it specifies into which position of the index the new section should be inserted. When doing this, it's important to remember that arrays start with 0.

Example 1.4

Let's take a look at an example of how to use addSection:

First, we are going to want to specify what we want to add as our toggler and element arguments. To do this, we are going to create two new variables and set them equal to our new content.

var thirdMenuToggler = new Element('div', {'class': 'toggle'}).setHTML('Menu 3');

var thirdMenuElement = new Element('div', {'class': 'element'}).setHTML(
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>

Here we created two variables, thirdMenuToggler and thirdMenuElement. We then assigned them the value of a new Element class and used the Element class arguments to set our variables as divisions and to name the classes of each. Finally, we used setHTML, which is a method of the Element class, to insert our desired HTML into our newly created divisions.

Now that we've set our variables, we can use the addSection method like this:

menu.addSection(thirdMenuToggler, thirdMenuElement, 1);

First, we have specified which accordion to add a section to, in this case, it is the accordion called 'menu'. We then used the addSection method and passed it our variables, thirdMenuToggler and thirdMenuElement, as arguments for addSection. The final argument, 1, places our new section in the second position of 'menu'. However, if we wanted to place it in the last position, we would simply omit the pos argument.

Here is our JavaScript code all together:

<script type="text/javascript">
window.addEvent('domready', function() {
	var menu = new Accordion('.toggle', '.element', {
		display: 1,
		fixedHeight: 300,
		alwaysHide: true,
		duration: 2500,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#CCC');
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#000');
	var thirdMenuToggler = new Element('div', {'class': 'toggle'}).setHTML('Menu 3');

	var thirdMenuElement = new Element('div', {'class': 
'element'}).setHTML('<ul><li><a href="#">Link 6</a></li><li><a href="#">Link 

	menu.addSection(thirdMenuToggler, thirdMenuElement, 2);


The second property for Accordion is display, which is useful for opening an accordion element with a secondary toggle or a toggle that is not a part of the accordion. To illustrate this, we are going to create three links that will open our accordion. We'll add the following HTML code to our already existing HTML code:

Example 1.5

	<a href="#" id="link1">Menu 1</a>
	<a href="#" id="link2">Menu 2</a>
	<a href="#" id="link3">Menu 3</a>

We're also going to add the following code to our JavaScript:

$('link1').addEvent('mouseover', function(){
	$('link2').addEvent('click', function(){
	$('link3').addEvent('click', function(){

As you can see, we are referencing each link ID through the $() function. We're adding two different types of events to toggle our accordion, mouseover and click. Then we're passing a function as the second argument for addEvent. Within that function, we specify that we want to add the event to the accordion called 'menu' and we add the display method to 'menu' and pass it the number of the element in the index we would like toggled.

More Accordions

There are many more ways to apply the accordion class that have not already been covered. I'll cover them briefly in concept-only here, but you should be able to use the concepts you've learned in this tutorial to write the actual code yourself.

Nested Accordions

A common task is creating a nested accordion (an accordion within an accordion). To do this, you would have to create the necessary HTML within one of your elements that is toggled visible. You would also have to create a new accordion (in addition to 'menu') in the JavaScript section of your code.

FAQ Accordions

While our example used the accordion for a menu, another popular use for it is to create a FAQ section. Nothing in the JavaScript should need to be changed, but you'll probably want to use some CSS styling.

Putting It All Together

We covered a lot in this tutorial and hopefully it should get you started working with both JavaScript and MooTools. Although this tutorial only gives examples for the Accordion class, you should be able to take the principles of what you've learned and apply them to other MooTools classes as well.

It's important to note that, even though this tutorial also offers some basic JavaScript concepts, its primary focus is to be an entry-level tutorial for MooTools. MooTools extends the functionality of JavaScript, so not all of the concepts learned in this tutorial will apply to JavaScript in general. Remember this if you are working with JavaScript apart from MooTools.

Further Resources

These resources should help you continue learning both the MooTools library and Javascript.


Now that you've had an introduction to MooTools, you should dive a little deeper and learn in more detail about the fundamentals. Aaron Newton has written a very comprehensive reference guide for MooTools called, 'The Mootorial'. In it he goes over almost every class, function, and property of the MooTools library. It's a must read if you want to learn MooTools intimately.

You can find The Mootorial here:

The MooTools website itself is also a great resource for learning more about the MooTools library. Here are some important links:


Although this tutorial has done its best to introduce both MooTools and JavaScript, to use MooTools effectively, you really must learn JavaScript as well. Here are some resources that will help you do exactly that:


We'd like to thank you for reading our tutorial. Our prayer is that it has been able to help you begin working with MooTools and JavaScript. We will be posting many other types of tutorials and tips in the near future, so please keep checking back as we add content and resources to our website.


  • Benjamin Kuker

    Benjamin Kuker

    Benjamin Kuker is the co-founder of Virtuosi Media and is married to his beautiful wife, Johanna. He is responsible for the design and maintenance of this website. He enjoys reading, writing, programming, business, sports, and traveling.

    View Benjamin's Bio

Help us spread the word.

Your Comments Are Valuable - Join The Discussion!


Copyright 2011 Virtuosi Media Inc.