1 /**

     2  * Interface Elements for jQuery

     3  * Accordion

     4  * 

     5  * http://interface.eyecon.ro

     6  * 

     7  * Copyright (c) 2006 Stefan Petre

     8  * Dual licensed under the MIT (MIT-LICENSE.txt) 

     9  * and GPL (GPL-LICENSE.txt) licenses.

    10  *

    11  */

    12 

    13 /**

    14  * Create an accordion from a HTML structure

    15  *

    16  * @example $('#myAccordion').Accordion(

    17  *				{

    18  *					headerSelector	: 'dt',

    19  *					panelSelector	: 'dd',

    20  *					activeClass		: 'myAccordionActive',

    21  *					hoverClass		: 'myAccordionHover',

    22  *					panelHeight		: 200,

    23  *					speed			: 300

    24  *				}

    25  *			);

    26  * @desc Converts definition list with id 'myAccordion' into an accordion width dt tags as headers and dd tags as panels

    27  * 

    28  * @name Accordion

    29  * @description Create an accordion from a HTML structure

    30  * @param Hash hash A hash of parameters

    31  * @option Integer panelHeight the pannels' height

    32  * @option String headerSelector selector for header elements

    33  * @option String panelSelector selector for panel elements

    34  * @option String activeClass (optional) CSS Class for active header

    35  * @option String hoverClass (optional) CSS Class for hovered header

    36  * @option Function onShow (optional) callback called whenever an pannel gets active

    37  * @option Function onHide (optional) callback called whenever an pannel gets incative

    38  * @option Function onClick (optional) callback called just before an panel gets active

    39  * @option Mixed speed (optional) animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']

    40  * @option Integer crrentPanel (otional) the active panel on initialisation

    41  *

    42  * @type jQuery

    43  * @cat Plugins/Interface

    44  * @author Stefan Petre

    45  */

    46 jQuery.iAccordion = {

    47 	build : function(options)

    48 	{

    49 		return this.each(

    50 			function()

    51 			{

    52 				if (!options.headerSelector || !options.panelSelector)

    53 					return;

    54 				var el = this;

    55 				el.accordionCfg = {

    56 					panelHeight			: options.panelHeight||300,

    57 					headerSelector		: options.headerSelector,

    58 					panelSelector		: options.panelSelector,

    59 					activeClass			: options.activeClass||'fakeAccordionClass',

    60 					hoverClass			: options.hoverClass||'fakeAccordionClass',

    61 					onShow				: options.onShow && typeof options.onShow == 'function' ? options.onShow : false,

    62 					onHide				: options.onShow && typeof options.onHide == 'function' ? options.onHide : false,

    63 					onClick				: options.onClick && typeof options.onClick == 'function' ? options.onClick : false,

    64 					headers				: jQuery(options.headerSelector, this),

    65 					panels				: jQuery(options.panelSelector, this),

    66 					speed				: options.speed||400,

    67 					currentPanel		: options.currentPanel||0

    68 				};

    69 				el.accordionCfg.panels

    70 					.hide()

    71 					.css('height', '1px')

    72 					.eq(0)

    73 					.css(

    74 						{

    75 							height: el.accordionCfg.panelHeight + 'px',

    76 							display: 'block'

    77 						}

    78 					)

    79 					.end();

    80 					

    81 				el.accordionCfg.headers

    82 				.each(

    83 					function(nr)

    84 					{

    85 						this.accordionPos = nr;

    86 					}

    87 				)

    88 				.hover(

    89 					function()

    90 					{

    91 						jQuery(this).addClass(el.accordionCfg.hoverClass);

    92 					},

    93 					function()

    94 					{

    95 						jQuery(this).removeClass(el.accordionCfg.hoverClass);

    96 					}

    97 				)

    98 				.bind(

    99 					'click',

   100 					function(e)

   101 					{

   102 						if (el.accordionCfg.currentPanel == this.accordionPos)

   103 							return;

   104 						el.accordionCfg.headers

   105 							.eq(el.accordionCfg.currentPanel)

   106 							.removeClass(el.accordionCfg.activeClass)

   107 							.end()

   108 							.eq(this.accordionPos)

   109 							.addClass(el.accordionCfg.activeClass)

   110 							.end();

   111 						el.accordionCfg.panels

   112 						.eq(el.accordionCfg.currentPanel)

   113 							.animate(

   114 								{height:0},

   115 								el.accordionCfg.speed,

   116 								function()

   117 								{

   118 									this.style.display = 'none';

   119 									if (el.accordionCfg.onHide) {

   120 										el.accordionCfg.onHide.apply(el, [this]);

   121 									}

   122 								}

   123 							)

   124 						.end()

   125 						.eq(this.accordionPos)

   126 							.show()

   127 							.animate (

   128 								{height:el.accordionCfg.panelHeight},

   129 								el.accordionCfg.speed,

   130 								function()

   131 								{

   132 									this.style.display = 'block';

   133 									if (el.accordionCfg.onShow) {

   134 										el.accordionCfg.onShow.apply(el, [this]);

   135 									}

   136 								}

   137 							)

   138 						.end();

   139 						

   140 						if (el.accordionCfg.onClick) {

   141 							el.accordionCfg.onClick.apply(

   142 								el, 

   143 								[

   144 									this, 

   145 									el.accordionCfg.panels.get(this.accordionPos),

   146 									el.accordionCfg.headers.get(el.accordionCfg.currentPanel),

   147 									el.accordionCfg.panels.get(el.accordionCfg.currentPanel)

   148 								]

   149 							);

   150 						}

   151 						el.accordionCfg.currentPanel = this.accordionPos;

   152 					}

   153 				)

   154 				.eq(0)

   155 				.addClass(el.accordionCfg.activeClass)

   156 				.end();

   157 				jQuery(this)

   158 					.css('height', jQuery(this).css('height'))

   159 					.css('overflow', 'hidden');

   160 			}

   161 		);

   162 	}

   163 };

   164 

   165 jQuery.fn.Accordion = jQuery.iAccordion.build;