Creating and configuring a basic accordion is simple, but you must read the full text carefully, as more advanced options may be complex.
Basic knowledge
Create a new accordion
To create a new accordion, you need to select some pairs of elements--including headings and content. So, first of all, you need to specify a CSS class name for each title and each content block individually:
Reference code:
Copy Code code as follows:
<p class= "Elements" >here is the content of toggle 1</p>
<p class= "Elements" >here is the content of toggle 2</p>
Now, we select all the CSS class names "Togglers" and all the CSS class names "elements" and assign them to variables, then initialize an accordion object.
Reference code:
Copy Code code as follows:
var toggles = $$ ('. Togglers ');
var content = $$ ('. elements ');
Create your object variable
Use "new" to create a new accordion object
Set switch (toogle) array
Set up an array of content
var accordionobject = new accordion (toggles, content);
The default setting of the accordion gives you an effect that might be like this:
Toggle 1
This is the content of toggle 1
Toggle 2
This is the content of toggle 2
Toggle 3
This is the content of toggle 3
Options
Of course, if you want something other than the accordion default effect, you need to adjust the options. Here we will explain one by one.
Display
Default is 0
This option determines which elements are displayed when 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 just need to set the index value of another element (integer). Unlike show, display will use a gradient animation to expand the element.
Reference code:
Copy Code code as follows:
var accordionobject = new accordion (toggles, content {
display:0//default is 0
});
Show
Default is 0
Like "Display", "show" determines that the element will expand when the page is loaded, but it does not have a gradient animation, it only appears when the page is loaded and does not use any gradient animations.
Reference code:
Copy Code code as follows:
var accordionobject = new accordion (toggles, content {
display:0//default is 0
});
Height
The default is True
When set to true, the content is displayed with a highly gradient animation effect. As you can see above, it is a standard accordion setting.
Reference code:
Copy Code code as follows:
var accordionobject = new accordion (toggles, content {
Height:true//default to True
});
Width
Default to False
Similar to height, but instead of using a highly gradient animation to display content, you use a width gradient animation to display the content. If you use the "width" option with other standard settings that we see, the distance between the title switches will remain the same, based entirely on the height of the content. The content div will be left to right, and the width will gradually widen to show the content.
Reference code:
Copy Code code as follows:
var accordionobject = new accordion (toggles, content {
Width:false//default to False
});
Opacity
The default is True
This option sets whether the opacity gradient effect is used when you hide or display content. Since we used the default settings above, you can see the effect.
Reference code:
Copy Code code as follows:
var accordionobject = new accordion (toggles, content {
Opacity:true//default to True
});
Fixedheight
Default to False
To set a fixed height, you can set an integer here (for example, you can set 100 so that the height of the content can be 100px). If you are setting a height of less than the content, here you need to set the overflow property of the content in the CSS. As you might expect, when you use the "Show" option, when the page is first loaded, it does not take effect (is registered).
Reference code:
Copy Code code as follows:
var accordionobject = new accordion (toggles, content {
Fixedheight:false//default to False
});
FixedWidth
Default to False
Similar to the "fixedheight" above, if you give this option an integer, this will set its width.
Reference code:
Copy Code code as follows:
var accordionobject = new accordion (toggles, content {
Fixedwidth:false//default to False
});
Alwayshide
Default to False
This option allows you to add a switch to the title. By setting this option to True, when you click on a title that has been expanded by the content, it closes the content block but does not expand any elements. You can see it in the following example immediately.
Reference code:
Copy Code code as follows:
var accordionobject = new accordion (toggles, content {
Alwayshide:false//default to False
});
Event
Onactive
This event is triggered when you switch an element. He will pass this switch control elements and content elements, as well as switch status as parameters.
Reference code:
Copy Code code 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, and it passes all other closed elements as arguments instead of the expanded elements.
Reference code:
Copy Code code 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 passes a variable that contains the content element. Here's a better way to get these things, and if anyone knows, you can make a note.
Reference code:
Copy Code code 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 ();
In this way, you can add a section (a title/content element pair) in the middle. This is as many other methods as we have seen. First, we refer to an accordion object, followed by a. AddSection, and then you can call the ID of the title, the ID of the content, and finally give it a position-the position where the new element will appear (0 is the first position).
Reference code: [Copy Code] [Save code]
Accordionobject.addsection (' Togglersid ', ' Elementsid ', 2);
Note: When you add a section in this way, it will be displayed where the index value is 2, but its real index should be the last index value plus 1. If you have 5 items in an array, and then you add the sixth one, its index value is 5, regardless of whether you pass the. AddSection () method to add it to where.
. display ();
This method allows you to expand a specified element. You can select this element by its index value (if you add a new element to it and you want to expand it, you need to use a new index value).
Reference code:
Copy Code code as follows:
Accordionobject.display (5); This will show you the newly added elements
Example Demo
Here we have a fully functional accordion, using all the events and methods we've seen above, and a lot of options. Carefully read the following code and the relevant comments in the code to see how they are used.
Reference code:
Copy Code code as follows:
Assign a switch element and a content element to two variables
var toggles = $$ ('. Togglers ');
var content = $$ ('. elements ');
Create an object variable
Create a new accordion object using new
Set switch array
Set up an array of content
Setting related options and events
var accordionobject = new accordion (toggles, content, {
When the page is loaded
This displays the (show) content element (the element that corresponds to the index)
No gradient animations, just expand
Also note: If you use the "Fixedheight",
The show option will not work when the page is loaded for the first time
The show option overrides the Display option
show:0,
When the page is loaded
This displays the (display) content element (the element that corresponds to the index)
There will be a gradient animation when the content expands
If display options and show options are set at the same time
Show options will overwrite display options
display:0,
The default is True
This will create a vertical accordion
Height:true,
This is the horizontal accordion parameter used
Because CSS is involved, this is more complicated.
Shall we speak again in a later lecture?
Width:false,
The default is True
This will give the content an opacity gradient effect
Opacity:true,
The default is false, or it can be an integer-
The height of all content blocks will be fixed
Need to set the overflow rules in CSS
If "show" is used, it will not take effect when the page is loaded for the first time
Fixedheight:false,
can be false or an integer
Similar to the fixedheight above,
But this is for the level accordion setting.
Fixedwidth:false,
Can let you switch an expanded item
Alwayshide:true,
Standard OnComplete Events
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 trigger when you switch an element
The switch element that is being opened will be passed
and content elements
Onactive:function (Toggler, Element) {
Toggler.highlight (' #76C83D '); Green
Element.highlight (' #76C83D ');
$ (' active '). Highlight (' #76C83D ');
},
This event will be triggered when an element begins to be hidden.
All elements that are being closed will be passed
Or an element that is not expanded
Onbackground:function (Toggler, Element) {
Toggler.highlight (' #DC4F4D '); Red
Element.highlight (' #DC4F4D ');
$ (' background '). Highlight (' #DC4F4D ');
}
});
$ (' add_section '). Addevent (' click ', function () {
The newly added sections are in pairs.
(including the ID of the switch and the ID of the associated content)
followed by the index of where they want to be placed
Accordionobject.addsection (' Togglersid ', ' Elementsid ', 0);
});
$ (' display_section '). Addevent (' click ', function () {
Determines which element is displayed the first time the page is loaded
The settings for the display option will be overwritten
Accordionobject.display (4);
});
Here you can see when the event was triggered.
Oncompleteonactiveonbackground
Try the following button to add a pair of content.
Toggle 1
This is the content of toggle 1 This is the content of toggle 1 This is the content of toggle 1 This is the content of tog GLE 1 is the content of toggle 1 This is the content of toggle 1 This is the content of toggle 1 This is the content of Toggle 1
Toggle 2
This is the content of toggle 2
Toggle 3
This is the content of toggle 3
Toggle 4
This is the content of toggle 4
Toggle ADD
This is the content of toggle 4
To pay attention to the place
. Display can recognize indexes (index), but if you use the AddSection method, this section will use the last index
If you use the "fixedheight" option, the "Show" option does not work, but it works under the "Display" option
More accordion options, events, and methods
The accordion (accordion) class inherits from the Fx.element class, and the Fx.element class inherits from the FX class. You can use the various options of these classes to optimize your accordion (accordion). Although it seems to be a very simple thing, but the accordion is a very useful and powerful plug-ins. I would love to see someone take advantage of this to make any effect.
Learn More
Refer to the accordion section in the documentation, as well as the fx.elements and Fx sections. You can also look at the use of accordion in the MooTools official demo .
Download a Zip package that contains everything you need to start
Includes the MooTools 1.2 core library and extended (more) libraries, examples above, an external JavaScript file, a simple HTML page and a CSS file.
