Posted By

flashpro on 02/28/08

Tagged

Versions (?)

Last Edited at 02/28/08 07:17am

Statistics

Viewed 777 times

Favorited by 2 user(s)

Related snippets

accordion with YUI javascript library

/ Published in: JavaScript

For this snippet you need the files: yahoo-dom-event.js and animation-min.js from the Yahoo User Interface Library (version 2.4.1).

Code
To use this snippet add a class "accordion" to a defenition list.
The "DT" will be converted to the clickable headers. The "DD" will be used for the accordion item content. Add a class "open" to an "DD" element which should be open on startup.

Call the main function by putting the code below in a initPage function:

YAHOO.lutsr.accordion.init(true,10,true);

The first parameter sets the animation on/off (default = true), the second represents the ammount of frames the animation should take (default = 10), the last defines if there could be more than one item open at once (default = true).

Highlighted TextExpand

var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var $ = function(id) {
      return document.getElementById(id);
}

//++++++++++++++++++++++++++++++++++++
// YUI ACCORDION
// 1/22/2008 - Edwart Visser
//
// accordion
//
// REQUIRES: yahoo-dom-event.js, animation-min.js
//
// TODO: build hover script for highlighting header in IE
// TODO: attach behaviour based on rel attribute
//++++++++++++++++++++++++++++++++++++

YAHOO.namespace("lutsr");

YAHOO.lutsr.accordion = {
	properties : {
		animation : true,
		animationDuration : 10,
		multipleOpen : false
	},

init : function(animation,animationDuration,multipleOpen) {
		if(animation) {
			this.animation = animation;
		}
		if(animationDuration) {
			this.animationDuration = animationDuration;
		}
		if(multipleOpen) {
			this.multipleOpen = multipleOpen;
		}

var accordionObjects = Dom.getElementsByClassName("accordion");

if(accordionObjects.length > 0) {

for(var i=0; i<accordionObjects.length; i++) {
				if(accordionObjects[i].nodeName == "DL") {
					var headers = accordionObjects[i].getElementsByTagName("dt");
					var bodies = headers[i].parentNode.getElementsByTagName("dd");
				}
				this.attachEvents(headers,i);
			}
		}
	},

attachEvents : function(headers,nr) {
		for(var i=0; i<headers.length; i++) {
			var headerProperties = {
				objRef : headers[i],
				nr : i,
				jsObj : this
			}
			
			Event.addListener(headers[i],"click",this.clickHeader,headerProperties);
		}
	},

clickHeader : function(e,headerProperties) {
		var parentObj = headerProperties.objRef.parentNode;
		var headers = parentObj.getElementsByTagName("dd"); 
		var header = headers[headerProperties.nr];

if(Dom.hasClass(header,"open")) {
			headerProperties.jsObj.collapse(header);
		} else {
			if(headerProperties.jsObj.properties.multipleOpen) {
				headerProperties.jsObj.expand(header);
			} else {
				for(var i=0; i<headers.length; i++) {
					if(Dom.hasClass(headers[i],"open")) {
						headerProperties.jsObj.collapse(headers[i]);
					}
				}
				headerProperties.jsObj.expand(header);
			}
		}
	},
	
	collapse : function(header) {
		Dom.removeClass(Dom.getPreviousSibling(header),"selected");
		if(!this.properties.animation) {
			Dom.removeClass(header,"open");
		} else {
			this.initAnimation(header,"close");
		}
	},
	expand : function(header) {
		Dom.addClass(Dom.getPreviousSibling(header),"selected");
		if(!this.properties.animation) {
			Dom.addClass(header,"open");
		} else {
			this.initAnimation(header,"open");
		}
	},
	
	initAnimation : function(header,dir) {
		if(dir == "open") {
			Dom.setStyle(header,"visibility","hidden");
			Dom.setStyle(header,"height","auto");
			Dom.addClass(header,"open");
			var attributes = {
				height : {
					from : 0,
					to : header.offsetHeight
				}
			}
			Dom.setStyle(header,"height",0);
			Dom.setStyle(header,"visibility","visible");
			
			var animation = new YAHOO.util.Anim(header,attributes);
			animationEnd = function() {
				// leave it here
			}
			animation.duration = this.properties.animationDuration;
			animation.useSeconds = false;
			animation.onComplete.subscribe(animationEnd);
			animation.animate();
		} else if ("close") {
			var attributes = {
				height : {
					to : 0
				}
			}			
			animationEnd = function() {
				Dom.removeClass(header,"open");
			}
			var animation = new YAHOO.util.Anim(header,attributes);
			animation.duration = this.properties.animationDuration;
			animation.useSeconds = false;
			animation.onComplete.subscribe(animationEnd);
			animation.animate();
		}
	}
}

initPage = function() {
	YAHOO.lutsr.accordion.init();
}

Event.on(window,"load",initPage);

URL: http://www.lutsr.nl/yui/accordion/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.