Copyright © 2009 - 2012 Gloss Visual, LLC. | All Rights Reserved.
// The speed of the accordion
resizeSpeed : 8,
// The classnames to look for
classNames : {
// The standard class for the title bar
toggle : 'accordion_toggle',
// The class used for the active state of the title bar
toggleActive : 'accordion_toggle_active',
// The class used to find the content
content : 'accordion_content'
},
// The direction of the accordion
direction : 'vertical',
// Should the accordion activate on click or say on mouseover? (apple.com)
onEvent : 'click'
// General Syntax
new accordion('container-selector', options);
// Horizontal example
var horizontalAccordion = new accordion('#top_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525
},
direction : 'horizontal'
});
// Vertical Accordion
var verticalAccordion = new accordion('#bottom_container');
// Let's create it
var verticalAccordion = new accordion('#bottom_container');
// Now lets open the first slide
verticalAccordion.activate($$('#bottom_container .accordion_toggle')[0]);
So we use the selector method from prototype to get the first title bar from the container+classname and we want the first one so we use [0]. Couldn't be easier!
So let's say you want all your accordions closed on page load but don't want the nasty flash and don't want to sacrifice accessibility.
// Special thanks go out to Will Shaver @ http://primedigit.com/
var verticalAccordions = $$('.accordion_toggle');
verticalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: '0px'
});
});