Jquery Collapsible Plugin


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /*************************************************************************************************************
  2.  * This source file is subject to the End User License Agreement (EULA) that
  3.  * is bundled with this package in the file LICENSE.txt. It is also available
  4.  * through the world-wide-web at this URL: http://www.ontic.com.au/license.html
  5.  * If you did not receive a copy of the license and are unable to obtain it through
  6.  * the world-wide-web, please send an email to [email protected] immediately.
  7.  * Copyright (c) 2010, Ontic (http://www.ontic.com.au). All rights reserved.
  8.  * Redistributions of files must retain the above copyright notice.
  9.  *
  10.  * @id $Id$
  11.  * @license see LICENSE.txt
  12.  * @author see AUTHORS.txt
  13.  * @copyright see COPYRIGHT.txt
  14.  * @category Magento
  15.  * @package ontic
  16.  * @subpackage default
  17.  * @since Ontic(TM)
  18.  * @version $Revision$
  19.  * @modifiedby $LastChangedBy$
  20.  * @lastmodified $Date$
  21.  ************************************************************************************************************/
  22.  
  23. /**
  24.  * Example Usage:
  25.  *
  26.  * jQuery(document).ready(
  27.  * function($)
  28.  * {
  29.  * $("div#drawer").collapsible(
  30.  * {
  31.  * startHidden: true,
  32.  * trackState: true,
  33.  * updateText: false,
  34.  * triggerElement: "a#collapse-container-link",
  35.  * expandDuration: "500",
  36.  * collapseDuration: "500"
  37.  * }
  38.  * );
  39.  * }
  40.  * );
  41.  */
  42.  
  43. /**
  44.  * Jquery Collapsible Plugin
  45.  */
  46. (function($)
  47. {
  48. // Chained function for creating collapsible element(s).
  49. $.fn.collapsible = function(options)
  50. {
  51. // Attach collapsible functionality to jQuery object(s).
  52. return collapsible.init(this, options);
  53. };
  54.  
  55. // Default options.
  56. $.fn.collapsible.defaults =
  57. {
  58. startHidden: false,
  59. trackState: false,
  60. updateText: true,
  61. updateClass: true,
  62. triggerTag: "<div/>",
  63. triggerElement: "",
  64. expandClass: "expand",
  65. collapseClass: "collapse",
  66. textElement: "",
  67. expandText: "open",
  68. collapseText: "close",
  69. expandAnimation: {height: "show"},
  70. collapseAnimation: {height: "hide"},
  71. expandDuration: 0,
  72. collapseDuration: 0,
  73. expandEasing: "swing",
  74. collapseEasing: "swing",
  75. beforeExpand: null,
  76. beforeCollapse: null,
  77. afterExpand: null,
  78. afterCollapse: null,
  79. cookieExpires: 365,
  80. cookiePrefix: "collapsible",
  81. };
  82.  
  83. // Private data and functions.
  84. var collapsible =
  85. {
  86. // Attach collapsible functionality to given elements.
  87. init: function(elements, options)
  88. {
  89. // Merge the default options with user defined options.
  90. options = $.extend({}, $.fn.collapsible.defaults, options);
  91.  
  92. // Loop through each of the collapsible elements.
  93. elements.each(
  94. function()
  95. {
  96. // The cookie name used for tracking the elements collapsed state.
  97. var cookieName = null;
  98.  
  99. // Check if the element has a unique identifier to prevent cookie name collisions.
  100. if (this.id)
  101. {
  102. cookieName = options.cookiePrefix + "_" + this.id;
  103. }
  104.  
  105. // If tracking the collapsed state is enabled and a cookie name is set.
  106. if (options.trackState && cookieName)
  107. {
  108. // If a cookie has not yet been created for this element.
  109. if ($.cookie(cookieName) == undefined)
  110. {
  111. // If the element should be hidden by default.
  112. if (options.startHidden)
  113. {
  114. // Set the cookie value as collapsed.
  115. $.cookie(cookieName, "collapsed");
  116. }
  117. else
  118. {
  119. // Set the cookie value as expanded.
  120. $.cookie(cookieName, "expanded");
  121. }
  122. }
  123.  
  124. // If the cookie value is set to collapsed.
  125. if ($.cookie(cookieName) == "collapsed")
  126. {
  127. // Hide the element.
  128. $(this).hide();
  129. }
  130. }
  131. // If cookie tracking is not enabled, but the element should be hidden by default.
  132. else if (options.startHidden)
  133. {
  134. // Hide the element.
  135. $(this).hide();
  136. }
  137.  
  138. // Whether or not the element is hidden.
  139. var hidden = $(this).is(":hidden");
  140. // Set the text based on visibility.
  141. var updateText = (hidden ? options.expandText : options.collapseText);
  142. // Set the added class based on visibility.
  143. var addClass = (hidden ? options.expandClass : options.collapseClass);
  144. // Set the removed class based on visibility.
  145. var removeClass = (hidden ? options.collapseClass : options.expandClass);
  146.  
  147. // If a trigger element was not specified, we need to create one.
  148. if (!options.triggerElement.length)
  149. {
  150. // Create the trigger link.
  151. var triggerLink = $("<a/>").attr({"href": "javascript:void(0)", "title": updateText});
  152. // Create the trigger element.
  153. var triggerElement = $(options.triggerTag).append(triggerLink);
  154.  
  155. // Assign the new text if updateText is enabled.
  156. if (options.updateText)
  157. {
  158. triggerElement.children().text(updateText);
  159. }
  160.  
  161. // Assign the new class if updateClass is enabled.
  162. if (options.updateClass)
  163. {
  164. triggerElement.removeClass(removeClass).addClass(addClass);
  165. }
  166.  
  167. // Bind to the click event.
  168. triggerElement.bind('click',
  169. {
  170. options: options,
  171. trigger: triggerElement,
  172. cookie: cookieName,
  173. text: triggerElement.children(),
  174. target: $(this)
  175. },
  176. function(event)
  177. {
  178. return collapsible.onClick(event);
  179. }
  180. );
  181.  
  182. // Append the trigger element to the DOM.
  183. $(this).after(triggerElement);
  184. }
  185. // An trigger element has been given.
  186. else
  187. {
  188. // If the trigger element is a string, set it as an object.
  189. if (typeof options.triggerElement == "string")
  190. {
  191. options.triggerElement = $(options.triggerElement);
  192. }
  193.  
  194. // If the text element is a string, set it as an object.
  195. if (options.textElement.length && typeof options.textElement == "string")
  196. {
  197. options.textElement = $(options.textElement);
  198. }
  199.  
  200. // Assign textElement to triggerElement if not set.
  201. var textElement = ((options.textElement.length) ? options.textElement : options.triggerElement);
  202.  
  203. // Assign the new text if updateText is enabled.
  204. if (options.updateText)
  205. {
  206. textElement.text(updateText);
  207. }
  208.  
  209. // Assign the new class if updateClass is enabled.
  210. if (options.updateClass)
  211. {
  212. options.triggerElement.removeClass(removeClass).addClass(addClass);
  213. }
  214.  
  215. // Bind to the click event.
  216. options.triggerElement.bind('click',
  217. {
  218. options: options,
  219. trigger: options.triggerElement,
  220. cookie: cookieName,
  221. text: textElement,
  222. target: this
  223. },
  224. function(event)
  225. {
  226. return collapsible.onClick(event);
  227. }
  228. );
  229. }
  230. }
  231. );
  232.  
  233. // Don't break the chain.
  234. return this;
  235. },
  236. onClick: function(event)
  237. {
  238. // Set a few options stored in the event data.
  239. var options = event.data.options;
  240. var trigger = event.data.trigger;
  241. var cookie = event.data.cookie;
  242. var text = event.data.text;
  243. var target = event.data.target;
  244.  
  245. // Whether or not the target element is hidden.
  246. var hidden = $(target).is(":hidden");
  247. // Set the cookie value based on visibility.
  248. var cookieValue = (hidden ? "expanded" : "collapsed");
  249. // Set the text based on visibility.
  250. var updateText = (hidden ? options.collapseText : options.expandText);
  251. // Set the added class based on visibility.
  252. var addClass = (hidden ? options.collapseClass : options.expandClass);
  253. // Set the removed class based on visibility.
  254. var removeClass = (hidden ? options.expandClass : options.collapseClass);
  255. // Set the animation based on visibility.
  256. var animation = (hidden ? options.expandAnimation : options.collapseAnimation);
  257. // Set the duration based on visibility.
  258. var duration = (hidden ? options.expandDuration : options.collapseDuration);
  259. // Set the easing based on visibility.
  260. var easing = (hidden ? options.expandEasing : options.collapseEasing);
  261. // Set the before animate callback based on visibility.
  262. var before = (hidden ? options.beforeExpand : options.beforeCollapse);
  263. // Set the after animate callback based on visibility.
  264. var after = (hidden ? options.afterExpand : options.afterCollapse);
  265.  
  266. // If tracking the collapsed state is enabled and a cookie name is set.
  267. if (cookie)
  268. {
  269. // Store the new cookie value based on visibility.
  270. $.cookie(cookie, cookieValue);
  271. }
  272.  
  273. // If a before animate callback is given.
  274. if ($.isFunction(before))
  275. {
  276. // Execute the before animate callback.
  277. before.apply(this);
  278. }
  279.  
  280. // Animate the target element.
  281. $(target).animate(animation, duration, easing, after);
  282.  
  283. // Assign the new text if updateText is enabled.
  284. if (options.updateText)
  285. {
  286. text.text(updateText);
  287. }
  288.  
  289. // Assign the new class if updateClass is enabled.
  290. if (options.updateClass)
  291. {
  292. trigger.removeClass(removeClass).addClass(addClass);
  293. }
  294.  
  295. return false;
  296. }
  297. };
  298. }
  299. )(jQuery);

URL: http://www.ontic.com.au

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.