PDA

View Full Version : The StickMan Labs - Accordion 2 - Question



zadlo
06-23-2008, 03:57 PM
Hi, at first Im a JavaScript n00b so be patient :P. I have downloaded the Kevin Miller Accordion script from www.stickmanlabs.com and succesly "installed" it, but it isn't working 100% that I have expect i mean the accrodion tabs have ability to open and close but I want to that when one tab is open only other can close it not the same tab. I know my post is a grammar mess but I'm learning english very hard, really :).

Could someone help me?? Thx in advance :)

here's the .js code



// accordion.js v2.0
//
// Copyright (c) 2007 stickmanlabs
// Author: Kevin P Miller | http://www.stickmanlabs.com
//
// Accordion 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,
duration : null,
effects : [],
animating : false,

//
// Initialize the accordions
//
initialize: function(container, options) {
if (!$(container)) {
throw(container+" doesn't exist!");
return false;
}

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'
}, 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.activate.bind(this, accordion), false);
if (this.options.onEvent == 'click') {
accordion.onclick = function() {return false;};
}

if (this.options.direction == 'horizontal') {
var options = $H({width: '0px'});
} else {
var options = $H({height: '0px'});
}
options.merge({display: 'none'});

this.currentAccordion = $(accordion.next(0)).setStyle(options);
}.bind(this));
},

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

this.effects = [];

this.currentAccordion = $(accordion.next(0));
this.currentAccordion.setStyle({
display: 'block'
});

this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive);

if (this.options.direction == 'horizontal') {
this.scaling = $H({
scaleX: true,
scaleY: false
});
} else {
this.scaling = $H({
scaleX: false,
scaleY: true
});
}

if (this.currentAccordion == this.showAccordion) {
this.deactivate();
} else {
this._handleAccordion();
}
},
//
// Deactivate an active accordion
//
deactivate : function() {
var options = $H({
duration: this.duration,
scaleContent: false,
transition: Effect.Transitions.sinoidal,
queue: {
position: 'end',
scope: 'accordionAnimation'
},
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
},
afterFinish: function() {
this.showAccordion.setStyle({
height: 'auto',
display: 'none'
});
this.showAccordion = null;
this.animating = false;
}.bind(this)
});
options.merge(this.scaling);

this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);

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

//
// Handle the open/close actions of the accordion
//
_handleAccordion : function() {
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(this.scaling);

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

if (this.showAccordion) {
this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);

options = $H({
sync: true,
scaleContent: false,
transition: Effect.Transitions.sinoidal
});
options.merge(this.scaling);

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() {
if (this.showAccordion) {
this.showAccordion.setStyle({
display: 'none'
});
}
$(this.currentAccordion).setStyle({
height: 'auto'
});
this.showAccordion = this.currentAccordion;
this.animating = false;
}.bind(this)
});
}
}

ddadmin
06-24-2008, 02:13 AM
I'm not familiar with the Prototype library (the script you mentioned uses it) and its syntax. FYI, Accordion Content script (http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm) does support the ability for at least one header to be open at all times, which seems to be what you're asking.

zadlo
06-24-2008, 05:08 AM
To do it change the:



if (this.currentAccordion == this.showAccordion) {
this.deactivate();
} else {
this._handleAccordion();
}



to:



if (this.currentAccordion != this.showAccordion) {
this._handleAccordion();
}


Thx for help anyway.