Mootools 1.2 Accordion tutorial

Document directory

• Learn more

Creating and configuring a basic accordion is simple, but you must carefully read the full text, because more advanced options may be complicated.
Basic knowledge
Create a new accordion
To create a new accordion, You need to select a pair of elements-including the title and content. Therefore, you must first specify a css class name for each title and each content block:
Reference code: Copy codeThe Code is as follows:

<P class = "elements"> Here is the content of toggle 1 </p>
<H3 class = "togglers"> Toggle 2 <P class = "elements"> Here is the content of toggle 2 </p>

Now, we select all css classes named "togglers" and all css classes named "elements", assign them to variables, and initialize an accordion object.
Reference code:Copy codeThe Code is as follows: var toggles =$ $ ('. togglers ');
Var content = $ ('. elements ');
// Create your object variable
// Use "new" to create a new accordion object
// Toogle Array
// Set the content Array
Var AccordionObject = new Accordion (toggles, content );

The default settings of the accordion may be as follows:
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

Option
Of course, if you want something other than the default effect of the accordion, you need to adjust the options. Here we will explain them one by one.
Display
The default value is 0.
This option determines which element will be displayed after the page is loaded. The default value is 0, so the first element is displayed. If you want to set it to another element, you only need to set it to the index value of another element (as an integer. Unlike "show", "display" uses a gradient animation to show elements.
Reference code:Copy codeThe Code is as follows: var AccordionObject = new Accordion (toggles, content {
Display: 0 // The default value is 0.
});

Show
The default value is 0.
Similar to "display", "show" determines that the element will be displayed after the page is loaded. However, it does not have a gradient animation, but is displayed after the page is loaded, without any gradient animation.
Reference code:Copy codeThe Code is as follows: var AccordionObject = new Accordion (toggles, content {
Display: 0 // The default value is 0.
});

Height
The default value is true.
When set to true, the content is displayed with a height gradient animation. As you can see above, it is a standard accordion setting.
Reference code:Copy codeThe Code is as follows: var AccordionObject = new Accordion (toggles, content {
Height: true // The default value is true.
});

Width
The default value is false.
Similar to "height", the width gradient animation is used instead of the height Gradient animation to display the content. If you use the "width" option together with other standard settings we see, the distance between the title switches will remain unchanged, and this distance is completely based on the Content height. The div of the content will be displayed from left to right, and the width will gradually become wider.
Reference code:Copy codeThe Code is as follows: var AccordionObject = new Accordion (toggles, content {
Width: false // The default value is false.
});

Opacity
The default value is true.
This option sets whether to use the opacity gradient effect when you hide or show the content. Because we use the default settings above, you can see the effect.
Reference code:Copy codeThe Code is as follows: var AccordionObject = new Accordion (toggles, content {
Opacity: true // The default value is true.
});

FixedHeight
The default value is false.
To set a fixed height, you can set an integer here (for example, you can set 100 to make the content height 100px ). If you want to set a height smaller than the content height, you need to set the overflow attribute of the content in CSS. As you may expect, when you use the "show" option, it will not take effect (registered) when the page is loaded for the first time.
Reference code:Copy codeThe Code is as follows: var AccordionObject = new Accordion (toggles, content {
FixedHeight: false // The default value is false.
});

FixedWidth
The default value is false.
Similar to the above "fixedHeight", if you give this option an integer, it sets its width.
Reference code:Copy codeThe Code is as follows: var AccordionObject = new Accordion (toggles, content {
FixedWidth: false // The default value is false.
});

AlwaysHide
The default value is false.
This option allows you to add a switch to the title. By setting this option to true, when you click a title with expanded content, it will close the content block, but will not expand any element. You can see it in the example below immediately.
Reference code:Copy codeThe Code is as follows: var AccordionObject = new Accordion (toggles, content {
AlwaysHide: false // The default value is false.
});

Event
OnActive
This event is triggered when you switch an element. It will pass the switch control element and content element, as well as the switch status as the parameter.
Reference code:Copy codeThe Code is as follows: var AccordionObject = new Accordion (toggles, content {
OnActive: function (toggler, element ){
Toggler. highlight ('# 76C83D'); // green
Element. highlight ('# 76C83D ');
}
});

OnBackground
This event is triggered when the ige element begins to hide. It will pass all elements that are closed by other regular expressions as parameters rather than expanded elements.
Reference code:Copy codeThe Code is as follows: var AccordionObject = new Accordion (toggles, content {
OnBackground: function (toggler, element ){
Toggler. highlight ('# DC4F4D'); // red
Element. highlight ('# DC4F4D ');
}
});

OnComplete
This is a standard onComplete event. It transmits a variable containing the content element. Here is another better way to get these things. If someone knows it, you can make a record.
Reference code:Copy codeThe Code is as follows: 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 ');
}
});

Method
. AddSection ();
With this method, you can add a section (A title/content element pair) in the middle ). Many other methods we have seen are the same. First, we reference an accordion object. addSection, then you can call the title id and Content id, and finally specify a location for the new element (0 is the first location ).
Reference code: [Copy Code] [Save Code]
AccordionObject. addSection ('togglersid', 'elementsid', 2 );
Note: When you add a section in this way, although it will be displayed at the index value of 2, its real index should be the last index value plus 1. If you have five items in an array, and then you add the sixth item, its index value is 5, regardless of whether you pass. addSection (); where the method adds it.
. Display ();
This method allows you to expand a specified element. You can select this element through its index value (if you add a new element pair and want to expand them, you need to use a new index value ).
Reference code:Copy codeThe Code is as follows: AccordionObject. display (5); // This will display your new element

Instance demo
Here we have a full-featured accordion, using all the events and methods we have seen above, there are many options. Carefully read the following code and comments in the code to see how they are used.
Reference code:Copy codeThe Code is as follows: // assign the switch element and content element to two variables.
Var toggles =$ $ ('. togglers ');
Var content = $ ('. elements ');
// Create an object variable
// Use new to create a new accordion object
// Set the Switch Array
// Set the content Array
// Set related options and events
Var AccordionObject = new Accordion (toggles, content ,{
// After the page is loaded
// This will display the (show) content element (corresponding to the index element)
// No gradient animation, just expand
// Note: If you use "fixedHeight ",
// When the page is loaded for the first time, the show option does not work.
// The "show" option overwrites the "display" option.
Show: 0,
// After the page is loaded
// This will display the content element (corresponding to the index element)
// There will be a gradient animation when the content is expanded
// If both the display and show options are set
// The show option overwrites the display option.
// Display: 0,
// The default value is true.
// This creates a vertical accordion
Height: true,
// This is used by the horizontal accordion Parameter
// This is complicated because CSS is involved.
// Let's talk about it in a later lecture?
Width: false,
// The default value is true.
// This will give the content an opacity gradient effect
Opacity: true,
// The default value is false. It can also be an integer-
// Fix the height of all content Blocks
// You need to set overflow rules in css.
// If "show" is used, it does not take effect when the page is loaded for the first time.
FixedHeight: false,
// It can be false or an integer.
// Similar to fixedHeight,
// However, this is a horizontal accordion setting.
FixedWidth: false,
// You can switch an expanded item
AlwaysHide: true,
// Standard onComplete event
// Pass a variable for each content Block Element
OnComplete: function (one, two, three, four, five ){
One. highlight ('#5D80C8'); // blue
Two. highlight ('#5D80C8 ');
Three. highlight ('#5D80C8 ');
Four. highlight ('#5D80C8 ');
Five. highlight ('#5D80C8'); // This is the added section.
$ ('Complete'). highlight ('#5D80C8 ');
},
// This event will be triggered when you switch an element
// The active switch element will be passed
// And content Element
OnActive: function (toggler, element ){
Toggler. highlight ('# 76C83D'); // green
Element. highlight ('# 76C83D ');
$ ('Active'). highlight ('# 76C83D ');
},
// This event will be triggered when an element begins to hide
// All elements that are being closed will be passed
// Or no expanded Element
OnBackground: function (toggler, element ){
Toggler. highlight ('# DC4F4D'); // red
Element. highlight ('# DC4F4D ');
$ ('Background'). highlight ('# DC4F4D ');
}
});
$ ('Add _ detail'). addEvent ('click', function (){
// The newly added section is paired.
// (Including the switch id and related content id)
// The index at which they are to be placed
AccordionObject. addSection ('togglersid', 'elementsid', 0 );
});
$ ('Display _ detail'). addEvent ('click', function (){
// Determines which element is displayed when the page is loaded for the first time.
// Overwrites the settings of the display Option
AccordionObject. display (4 );
});

Here you can see when the event was triggered.
OnCompleteonActiveonBackground
You can try to use the following button to add a pair of content.
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 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

Notes
. Display can recognize indexes. However, if you use the addSection method, this section uses the last index.
If you use the "fixedHeight" option, it does not play any role under the "show" option, but it works under the "display" option.
More accordion options, events, and methods
The Accordion class inherits from the Fx. Element class, while the Fx. Element class inherits from the Fx class. You can use various options of these classes to optimize your Accordion ). Although it looks simple, the accordion is a very useful and powerful plug-in. I am very happy to see anyone using this to do anything.
Learn more

See the accordion section in the document, as well as Fx. Elements and Fx. You can also see the use of accordion in the official demo of MooTools.

Download a zip package containing everything you need

Includes the core library and extended library of MooTools 1.2. The above example shows an external JavaScript file, a simple HTML page, and a CSS file.