Clown Shoes

I needed a solid accordion class that was stripped down and simple. I happened to stumble upon Kevin Miller’s excellent Accordion V1.0 (not just a clever name) in the Ajaxian archives at just the right time.

Everything worked perfectly for serving up clean accordions with static content. But, as i started applying the component to more and more applications, I realized that it would really be helpful if I could just load in the static content on demand with XHR (AJAX is a terrible acronym).

The result is a pretty simple modification to get this done. The one requirement however is that the toggle handle must be an a if you want to use XHR. Just specify the url you want to load from, for example:


<div id="container">
<a href="/list/details" class="accordion_toggle" id="1">View Details</a>
<div class="accordion_content">Content Goes Here</div>
</div>
<script type="text/javascript">

var Accordion = new accordion(‘#container’, {xhr: true});
</script>
Pretty simple, but pretty handy for when you need it.


// accordion.js v1.0
//
// Copyright (c) 2007 stickmanlabs
// Author: Kevin P Miller | http://www.stickmanlabs.com
//
// ListScroller is freely distributable under the terms of an MIT-style license.
//
// I don't care what you think about the file size...
// Be a pro:
// http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
// http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files
//

/*———————————————————————————————–*/
/*
if (typeof Effect == ‘undefined’)
throw(“accordion.js requires including script.aculo.us’ effects.js library!”);
*/
var accordion = Class.create();
accordion.prototype = {
//
// Setup the Variables
//
showAccordion : null,
currentAccordion : null,
currentParent: null,
duration : null,
effects : [],
animating : false,
ajaxUrl: null,
loaded: $H(),
//
// Initialize the accordions
//
initialize: function(container, options) {
this.options = Object.extend({
resizeSpeed : 8,
classNames : {
toggle : ‘accordion_toggle’,
toggleActive : ‘accordion_toggle_active’,
content : ‘accordion_content’
},
defaultSize : {
height : null,
width : null
},
direction : ‘vertical’,
onEvent : ‘click’,
xhr : false
}, options || {});

this.duration = ((11-this.options.resizeSpeed)*0.15);

var accordions = $$(container+’ .’+this.options.classNames.toggle);

accordions.each(function(accordion) {

Event.observe(accordion, this.options.onEvent, this.run.bind(this, accordion), false);
accordion.onclick = function() {return false;};

if (this.options.direction == ‘horizontal’) {
var options = $H({width: ‘0px’});
} else {
var options = $H({height: ‘0px’});
}

this.currentAccordion = $(accordion.next(0)).setStyle(options);
this.currentParent = $(accordion);

}.bind(this));
},
//
// Activate an accordion
//
activate : function(accordion) {
if (this.animating) {
return false;
}

this.effects = [];
this.currentAccordion = $(accordion.next(0));
if (this.currentAccordion == this.showAccordion) {
return false;
}
this.currentAccordion.previous(0).removeClassName(this.options.classNames.toggle);
this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive);

if (this.options.direction == ‘horizontal’) {
var adjustments = $H({
scaleX: true,
scaleY: false
});
} else {
var adjustments = $H({
scaleX: false,
scaleY: true
});
}

var options = $H({
sync: true,
scaleFrom: 0,
scaleContent: false,
transition: Effect.Transitions.sinoidal,
scaleMode: {
originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
}
});
options.merge(adjustments);

this.effects.push(
new Effect.Scale(this.currentAccordion, 100, options)
);

if (this.showAccordion) {
this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
this.showAccordion.previous(0).addClassName(this.options.classNames.toggle);
options = $H({
sync: true,
scaleContent: false,
transition: Effect.Transitions.sinoidal
});
options.merge(adjustments);

this.effects.push(
new Effect.Scale(this.showAccordion, 0, options)
);
}

new Effect.Parallel(this.effects, {
duration: this.duration,
queue: {
position: ‘end’,
scope: ‘accordionAnimation’
},
beforeStart: function() {
this.animating = true;
}.bind(this),
afterFinish: function() {
this.showAccordion = this.currentAccordion;
this.animating = false;
}.bind(this)
});
},

loadData: function(accordion){
this.currentParent = accordion;

new Ajax.Request(
accordion.href,
{
onComplete: this.processData.bindAsEventListener(this),
}
);
},
processData: function(t,json){
$(this.currentParent.next(0)).innerHTML = t.responseText;
this.loaded[this.currentParent.id] = true;
this.activate(this.currentParent);
},

run: function(accordion){
if(this.options.xhr===true){
if( (typeof accordion.id != ‘undefined’) && (!this.loaded[accordion.id]) ){ // Search through the hash and see if we’ve loaded this in already
this.loadData(accordion);
}
else {
this.activate(accordion);
}
}
else {
this.activate(accordion);
}
}
}