Accordion.js

Fx.Elements and Accordion.

Dependencies

Moo.js, Function.js, Array.js, String.js, Element.js, Fx.js

Author

Valerio Proietti, http://mad4milk.net

License

MIT-style license.

Summary
Accordion.js Fx.Elements and Accordion.
Fx. Elements Fx.Elements allows you to apply any number of styles trantisions to a selection of elements.
Properties
custom Applies the passed in style transitions to each object named (see example).
Fx. Accordion The Fx.Accordion function creates a group of elements that are toggled when their handles are clicked.
Properties
showThisHideOpen Shows a specific item and hides all others.

Fx. Elements

Fx.Elements allows you to apply any number of styles trantisions to a selection of elements.  Wonky syntax but very powerful.  Used internally by the accordion.

Arguments

elements a collection of elements the effects will be applied to.
options same as Fx.Base options.
Summary
Properties
custom Applies the passed in style transitions to each object named (see example).

Properties

custom

Applies the passed in style transitions to each object named (see example).  Each item in the collection is refered to as a numerical string (“1” for instance).  The first item is “0”, the second “1”, etc.

Example

var myElementsEffects = new Fx.Elements($$('a'));
myElementsEffects.custom({
'0': { //let's change the first element's opacity and width
'opacity': [0,1],
'width': [100,200]
},
'1': { //and the second one's opacity
'opacity': [0.2, 0.5]
}
});

Fx. Accordion

The Fx.Accordion function creates a group of elements that are toggled when their handles are clicked.  When one elements toggles in, the others toggles back.

Arguments

elements required, a collection of elements the transitions will be applied to.
togglers required, a collection of elements, the elements handlers.
options optional, see options below, and Fx.Base options.

Options

start either ‘open-first’ or ‘first-open’.  ‘open-first’ will slide that element open, while ‘first-open’ will just show that element as open immediately with no transition.
fixedHeight integer, if you want your accordion to have a fixed height. defaults to false.
fixedWidth integer, if you want your accordion to have a fixed width. defaults to false.
alwaysHide boolean, if you want the ability to close your only-open item. defaults to false.
wait boolean. means that open and close transitions can cancel current ones (so if you click on items before the previous finishes transitioning, the clicked transition will fire canceling the previous). true means that if one element is sliding open or closed, clicking on another will have no effect. for Accordion defaults to false.
onActive function to execute when an element starts to show
onBackground function to execute when an element starts to hide
height boolean, will add a height transition to the accordion if true. defaults to true.
opacity boolean, will add an opacity transition to the accordion if true. defaults to true.
width boolean, will add a width transition to the accordion if true. defaults to false, css mastery is required to make this work!
Summary
Properties
showThisHideOpen Shows a specific item and hides all others.

Properties

showThisHideOpen

Shows a specific item and hides all others.  Useful when triggering an accordion from outside.

Arguments

iToShow the index of the item to show.
My Object Oriented javascript.
Contains Function prototypes, utility functions and Chain.
function $A( array )
Copy the array and returns it.
Same as Array.copy, but as function.
Contains Array prototypes and the function $A;
Contains String prototypes and Number prototypes.
function $( el )
returns the element passed in with all the Element prototypes applied.
Contains useful Element prototypes, to be used with the dollar function $.
Applies visual transitions to any element.
Base class for the Mootools fx library.