MooTools - Accordion

Accordion is the most popular plugin that MooTools provides. It helps in hiding and revealing the data. Let us discuss more about it.

Creating new accordion

The basic elements that an accordion requires are pairs of toggles and their contents. Let us create pairs of headings and contents of the html.

<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>

Take a look at the following syntax to understand how to build an accordion based on the above HTML structure.

Syntax

var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);

Example

Let us take an example that defines the basic functionality of Accordion. Take a look at the following code.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            var AccordionObject = new Fx.Accordion(toggles, content);
         });
      </script>
   </head>
   
   <body>
      <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>
      <h3 class = "togglers">Toggle 3</h3>
      <p class = "elements">Here is the content of toggle 3</p>
   </body>
   
</html>

You will receive the following output −

Output

Accordion Options

Accordion provides tremendous features. These features help in tweaking the options to give customized output.

display

This option determines which element shows on page load. The default is set to 0, so the first element shows. To set another element, just put in another integer that corresponds with its index. Unlike “show”, display will transition the element open.

Syntax

var AccordionObject = new Accordion(toggles, content {
   display: 0 //default is 0
});

show

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 any transition.

Syntax

var AccordionObject = new Accordion(toggles, content {
   show: 0 //default is 0
});

height

When set to true, a height transition effect will take place when switching between displayed elements.. This is the standard accordion setting you see above.

Syntax

var AccordionObject = new Accordion(toggles, content {
   height: true //default is true
});

width

This works the same like the height option. However, instead of transitioning the height to show the content, this helps in transitioning of the width. If you use “width” with a standard setup, 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.

Syntax

var AccordionObject = new Accordion(toggles, content {
   width: false //default is false
});

opacity

This option determines whether or not to show an opacity transition effect when you hide or display some content. Since we are using the default options above, you can see the effect there.

Syntax

var AccordionObject = new Accordion(toggles, content {
   opacity: true //default is true
});

fixedHeight

To set a fixed height, you need to fix an integer (for example, you could put 100 for the 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.

Syntax

var AccordionObject = new Accordion(toggles, content {
   fixedHeight: false //default is false
});

fixedWidth

Just like “fixedHeight” above, this will set the width if you give this option an integer.

Syntax

var AccordionObject = new Accordion(toggles, content {
   fixedWidth: false //default is false
});

alwaysHide

This option lets you add a toggle control to the titles. With this set to true, when you click on an open content title, the content element will close automatically without opening anything else. You can see the execution in the following example.

Syntax

var AccordionObject = new Accordion(toggles, content {
   alwaysHide: false //default is false
});

Accordion Events

These events allow you to create your functionality for every action of Accordion.

onActive

This will execute when you toggle open an element. It will pass the toggle control element and the content element that is opening and also the parameters.

Syntax

var AccordionObject = new Accordion(toggles, content {
   onActive: function(toggler, element) {
      toggler.highlight('#76C83D'); //green
      element.highlight('#76C83D');
   }
});

onBackground

This executes when an element starts to hide and passes all other elements that are closing, but not opening.

Syntax

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.

Syntax

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

Accordion Methods

These methods help you create and manipulate Accordion Sections.

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, use .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 in (0 being the first spot).

Syntax

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.

Syntax

AccordionObject.display(5); //would display the newly added element

Example

The following example explains the Accordion feature with a few effects. Take a look at the following code.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            color: #222;
            margin: 0;
            padding: 2px 5px;
            background: #EC7063;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 15px;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
         }
         
         .ind {
            background: #2E86C1;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 20px;
            color: aliceblue;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
            width: 200px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            
            var AccordionObject = new Fx.Accordion(toggles, content, {
               show: 0,
               height : true,
               width : false,
               opacity: true,
               fixedHeight: false,
               fixedWidth: false,
               alwaysHide: true,
               
               onActive: function(toggler, element) {
                  toggler.highlight('#DC7633'); //green
                  element.highlight('#DC7633');
                  $('active').highlight('#DC7633');
               },
               
               onBackground: function(toggler, element) {
                  toggler.highlight('#AED6F1'); //red
                  element.highlight('#AED6F1');
                  $('background').highlight('#F4D03F');
               }
            });
            $('display_section').addEvent('click', function(){
               AccordionObject.display(4);
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "active" class = "ind">onActive</div>
      <div id = "background" class = "ind">onBackground</div>
      
      <div id = "accordion_wrap">
         <p class = "togglers">Toggle 1: click here</p>
         <p class = "elements">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</p>
         <p class = "togglers">Toggle 2: click here</p>
         <p class = "elements">Here is the content of toggle 2</p>
         <p class = "togglers">Toggle 3: click here</p>
         <p class = "elements">Here is the content of toggle 3</p>
         <p class = "togglers">Toggle 4: click here</p>
         <p class = "elements">Here is the content of toggle 4</p>
      </div>
      
      <p>
         100
         <button id = "display_section" class = "btn btn-primary">
            display section
         </button>
      </p>
      
   </body>
</html>

Output

Click on each Toggle section, then you will find the hidden data and the event indicators for every action.

Advertisements