”;
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.
”;