/*************************************************************************************************************
 * This source file is subject to the End User License Agreement (EULA) that
 * is bundled with this package in the file LICENSE.txt. It is also available
 * through the world-wide-web at this URL: http://www.ontic.com.au/license.html
 * If you did not receive a copy of the license and are unable to obtain it through
 * the world-wide-web, please send an email to [email protected] immediately.
 * Copyright (c) 2010, Ontic (http://www.ontic.com.au). All rights reserved.
 * Redistributions of files must retain the above copyright notice.
 * 
 * @id             $Id$
 * @license        see LICENSE.txt
 * @author         see AUTHORS.txt
 * @copyright      see COPYRIGHT.txt
 * @category       Magento
 * @package        ontic
 * @subpackage     default
 * @since          Ontic(TM)
 * @version        $Revision$
 * @modifiedby     $LastChangedBy$
 * @lastmodified   $Date$
 ************************************************************************************************************/

/**
 * Example Usage:
 * 
 * jQuery(document).ready(
 * 		function($)
 * 		{
 * 			$("div#drawer").collapsible(
 * 				{
 * 					startHidden: true,
 * 					trackState: true,
 * 					updateText: false,
 * 					triggerElement: "a#collapse-container-link",
 * 					expandDuration: "500",
 * 					collapseDuration: "500"
 * 				}
 * 			);
 * 		}
 * 	);
 */

/**
 * Jquery Collapsible Plugin
 */
(function($)
	{
		// Chained function for creating collapsible element(s).
		$.fn.collapsible = function(options)
		{
			// Attach collapsible functionality to jQuery object(s).
			return collapsible.init(this, options);
		};
		
		// Default options.
		$.fn.collapsible.defaults =
		{
			startHidden: false,
			trackState: false,
			updateText: true,
			updateClass: true,
			triggerTag: "<div/>",
			triggerElement: "",
			expandClass: "expand",
			collapseClass: "collapse",
			textElement: "",
			expandText: "open",
			collapseText: "close",
			expandAnimation: {height: "show"},
			collapseAnimation: {height: "hide"},
			expandDuration: 0,
			collapseDuration: 0,
			expandEasing: "swing",
			collapseEasing: "swing",
			beforeExpand: null,
			beforeCollapse: null,
			afterExpand: null,
			afterCollapse: null,
			cookieExpires: 365,
			cookiePrefix: "collapsible",
		};
		
		// Private data and functions.
		var collapsible =
		{
			// Attach collapsible functionality to given elements.
			init: function(elements, options)
			{
				// Merge the default options with user defined options.
				options = $.extend({}, $.fn.collapsible.defaults, options);
				
				// Loop through each of the collapsible elements.
				elements.each(
					function()
					{
						// The cookie name used for tracking the elements collapsed state.
						var cookieName = null;
						
						// Check if the element has a unique identifier to prevent cookie name collisions.
						if (this.id)
						{
							cookieName = options.cookiePrefix + "_" + this.id;
						}
						
						// If tracking the collapsed state is enabled and a cookie name is set.
						if (options.trackState && cookieName)
						{
							// If a cookie has not yet been created for this element.
							if ($.cookie(cookieName) == undefined)
							{
								// If the element should be hidden by default.
								if (options.startHidden)
								{
									// Set the cookie value as collapsed.
									$.cookie(cookieName, "collapsed");
								}
								else
								{
									// Set the cookie value as expanded.
									$.cookie(cookieName, "expanded");
								}
							}
							
							// If the cookie value is set to collapsed.
							if ($.cookie(cookieName) == "collapsed")
							{
								// Hide the element.
								$(this).hide();
							}
						}
						// If cookie tracking is not enabled, but the element should be hidden by default.
						else if (options.startHidden)
						{
							// Hide the element.
							$(this).hide();
						}
						
						// Whether or not the element is hidden.
						var hidden = $(this).is(":hidden");
						// Set the text based on visibility.
						var updateText = (hidden ? options.expandText : options.collapseText);
						// Set the added class based on visibility.
						var addClass = (hidden ? options.expandClass : options.collapseClass);
						// Set the removed class based on visibility.
						var removeClass = (hidden ? options.collapseClass : options.expandClass);
						
						// If a trigger element was not specified, we need to create one.
						if (!options.triggerElement.length)
						{
							// Create the trigger link.
							var triggerLink = $("<a/>").attr({"href": "javascript:void(0)", "title": updateText});
							// Create the trigger element.
							var triggerElement = $(options.triggerTag).append(triggerLink);
							
							// Assign the new text if updateText is enabled.
							if (options.updateText)
							{
								triggerElement.children().text(updateText);
							}
							
							// Assign the new class if updateClass is enabled.
							if (options.updateClass)
							{
								triggerElement.removeClass(removeClass).addClass(addClass);
							}
							
							// Bind to the click event.
							triggerElement.bind('click',
								{
									options: options,
									trigger: triggerElement,
									cookie: cookieName,
									text: triggerElement.children(),
									target: $(this)
								},
								function(event)
								{
									return collapsible.onClick(event);
								}
							);
							
							// Append the trigger element to the DOM.
							$(this).after(triggerElement);
						}
						// An trigger element has been given.
						else
						{
							// If the trigger element is a string, set it as an object.
							if (typeof options.triggerElement == "string")
							{
								options.triggerElement = $(options.triggerElement);
							}
							
							// If the text element is a string, set it as an object.
							if (options.textElement.length && typeof options.textElement == "string")
							{
								options.textElement = $(options.textElement);
							}
							
							// Assign textElement to triggerElement if not set.
							var textElement = ((options.textElement.length) ? options.textElement : options.triggerElement);
							
							// Assign the new text if updateText is enabled.
							if (options.updateText)
							{
								textElement.text(updateText);
							}
							
							// Assign the new class if updateClass is enabled.
							if (options.updateClass)
							{
								options.triggerElement.removeClass(removeClass).addClass(addClass);
							}
							
							// Bind to the click event.
							options.triggerElement.bind('click',
								{
									options: options,
									trigger: options.triggerElement,
									cookie: cookieName,
									text: textElement,
									target: this
								},
								function(event)
								{
									return collapsible.onClick(event);
								}
							);
						}
					}
				);
				
				// Don't break the chain.
				return this;
			},
			onClick: function(event)
			{
				// Set a few options stored in the event data.
				var options = event.data.options;
				var trigger = event.data.trigger;
				var cookie = event.data.cookie;
				var text = event.data.text;
				var target = event.data.target;
				
				// Whether or not the target element is hidden.
				var hidden = $(target).is(":hidden");
				// Set the cookie value based on visibility.
				var cookieValue = (hidden ? "expanded" : "collapsed");
				// Set the text based on visibility.
				var updateText = (hidden ? options.collapseText : options.expandText);
				// Set the added class based on visibility.
				var addClass = (hidden ? options.collapseClass : options.expandClass);
				// Set the removed class based on visibility.
				var removeClass = (hidden ? options.expandClass : options.collapseClass);
				// Set the animation based on visibility.
				var animation = (hidden ? options.expandAnimation : options.collapseAnimation);
				// Set the duration based on visibility.
				var duration = (hidden ? options.expandDuration : options.collapseDuration);
				// Set the easing based on visibility.
				var easing = (hidden ? options.expandEasing : options.collapseEasing);
				// Set the before animate callback based on visibility.
				var before = (hidden ? options.beforeExpand : options.beforeCollapse);
				// Set the after animate callback based on visibility.
				var after = (hidden ? options.afterExpand : options.afterCollapse);
				
				// If tracking the collapsed state is enabled and a cookie name is set.
				if (cookie)
				{
					// Store the new cookie value based on visibility.
					$.cookie(cookie, cookieValue);
				}
				
				// If a before animate callback is given.
				if ($.isFunction(before))
				{
					// Execute the before animate callback.
					before.apply(this);
				}
				
				// Animate the target element.
				$(target).animate(animation, duration, easing, after);
				
				// Assign the new text if updateText is enabled.
				if (options.updateText)
				{
					text.text(updateText);
				}
				
				// Assign the new class if updateClass is enabled.
				if (options.updateClass)
				{
					trigger.removeClass(removeClass).addClass(addClass);
				}
				
				return false;
			}
		};
	}
)(jQuery);

http://www.ontic.com.au

Jquery Collapsible Plugin

plugin, jquery

JavaScript