accordion.js

/*
 Script: accordian.js
 
  Author:
   Caleb Kniffen, <http://kniffenwebdesign.com>
 
  Version:
   1.6
  
  Required Files:
   - prototype.kLib.js
   - <kLib.js>
   
 Class: Accordian
  An expanding view widget.
*/
Accordian = Class.create()
Accordian.prototype = {
 /*
  Function: initialize
   Initializes the Accordian object.
  
  Arguments:
   element - HTML ELEMENT, The element to which the accordian will be appended.
   options - Object, An options object.
 */
 initialize:function(element, options){
  this.elem = $(element);
  this.tabs = new Array();
  this._setOptions(options);
 },
 /*
  Function: addTab
   Adds an AccordianTab to the Accordian.
  
  Arguments:
   header - string, The text or html displayed in the new AccordianTab's header.
   content - string, The text or html displayed in the new AccordianTab's content section.
   options - Object, An options object.
 */
 addTab:function(header,content,options){
  newTab = new AccordianTab(this, header, content, options);
  this.tabs[this.tabs.length]=newTab;
 },
 /*
  Function: clearAllTab
   Removes all of the Accordian's tabs.
 */
 clearAllTabs:function(){
  this.tabs.length=0;
  $C(this.elem);
 },
 /*
  Function: _setOptions
   Sets the Accordian's options.
  
  Arguments:
   options - Object, An options object.
 */
 _setOptions:function(options){
  this.options = {
   headerCollapseClass:'',
   headerExpandClass:'',
   contentClass:'',
   number:false
  };
  Object.extend(this.options, options || {});
 },
 /*
  Function: collapseAllBut
   Collapses all tabs except the tab specified.
  
  Arguments:
   clickedTab - AccordianTab, The tab to exempt from being collapsed.
 */
 collapseAllBut:function(clickedTab){
  for(x=0;x<this.tabs.length;x++){ if(this.tabs[x] != clickedTab) this.tabs[x].collapse(); }
 }
 /*
  Var: tabs
   array, Contains AccordianTabs
  
  Var: element
   HTML ELEMENT, The element to which the accordian will be appended.
  
  Var: options
   object, An options object.
  
  Option: headerCollapseClass 
   string, The CSS class for AccordianTabs when collapsed.
   
  Option: headerExpandClass 
   string, The CSS class for AccordianTabs when expanded.
  
  Option: contentClass
   string, The CSS class for AccordianTabs content section.
  
  Option: number
   boolean, defaults to false, Whether or not the tabs are to be numbered.
 */
}
/*
 Class: AccordianTab
  The tab for an Accordian object.
*/
AccordianTab = Class.create()
AccordianTab.prototype = {
 /*
  Function: initialize
   Initializes the AccordianTab object.
  
  Arguments:
   parent - AccordianTab
   header - string, The text or html displayed in the new AccordianTab's header.
   content - string, The text or html displayed in the new AccordianTab's content section.
   options - Object, An options object.
 */
 initialize:function(parent, header, content, options){
  this.parent = parent;
  this.header = header;
  this.content = content;
  
  this._setOptions(options);

  this.elems = new Object();
  this.elems.elem = makeAppendElem('div', this.parent.elem);
$S(this.elems.elem).width='100%';
  if(this.options.number){ header = (parent.tabs.length + 1) + '.&nbsp;' + header; }

  this.elems.header = makeAppendElem('div', this.elems.elem);
  $I(this.elems.header, header);
  this.elems.elem.onmouseup = this.headerClick.bindAsEventListener(this);

  this.elems.header.className = this.options.headerCollapseClass;
  this.elems.content = makeAppendElem('div',this.elems.elem);
  $I(this.elems.content, this.content);
  this.elems.content.className = this.options.contentClass;

  if(this.options.expand){
   this.expand();
   this.parent.collapseAllBut(this);
  }
  else this.collapse();
 },
 /*
  Function: expand
   Expands AccordianTab.
 */
 expand:function(){ $S(this.elems.content).display = 'block'; },
 /*
  Function: collapse
   Collapses AccordianTab.
 */
 collapse:function(){ $S(this.elems.content).display = 'none'; },
 /*
  Function: _setOptions
   Sets Accordian options.
  
  Arguments:
   options - Object, An options object.
 */
 _setOptions:function(options){
  this.options = {
   headerCollapseClass:'',
   headerExpandClass:'',
   contentClass:'',
   number:false,
   expand:false
  };
  Object.extend(this.options, this.parent.options || {});
  Object.extend(this.options, options || {});
 },
 /*
  Event: headerClick
   Called when the AccordianTab's header is clicked.
 */
 headerClick:function(){
  this.expand();
  this.parent.collapseAllBut(this);
 }
 /*
  Group: Variables
  
  Var: parent 
   Accordian, The Accordian to which the Accordian tab belongs.
  
  Var: header
   string, The text or html displayed in the new AccordianTab's header.
  
  Var: content
   string, The text or html displayed in the new AccordianTab's content section.
  
  Var: options
   object, An options object.
  
  Var: elems
   object, Contians AccordianTab's internal HTML ELEMENTS
   
  Group: Internal Elements
  
  Elem: elem
   <div>, Main AccordianTab HTML ELEMENT
  
  Elem: header
   <div>, Contains the header.
  
  Elem: content
   <div>, Contains the content.
  
  Group: Options
  
  Option: headerCollapseClass
   string, The CSS class for AccordianTab when collapsed.
   
  Option: headerExpandClass
   string, The CSS class for AccordianTab when expanded.
	
  Option: contentClass 
   string, The CSS class for AccordianTab content section.
   
  Option: number
   boolean, defaults to false, Whether or not the AccordianTab is to be numbered.
   
  Option: expand 
   boolean, defaults to false, Whether or not to expand AccordianTab upon creation.
 */
}

Originally wrote this in 2006 using Prototype. Posting here for fun.