Permalink
Browse files

major functionality update. can now toggle in reverse and write your …

…own functions for the creation and placement of the toggler element
  • Loading branch information...
elidupuis committed Jun 24, 2010
1 parent c2e14ee commit b6633b82b32d97b10bff2825736b6b0491af6a82
Showing with 94 additions and 44 deletions.
  1. +37 −9 index.html
  2. +57 −35 jquery.toggleChildren.js
View
@@ -12,28 +12,43 @@
<script src="jquery.toggleChildren.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
- $('.test').preventChildren({
+ $('.example1').toggleChildren({
items:7
});
- $('.test2').preventChildren({
+ $('.example2').toggleChildren({
+ items: 7,
+ reverse: true
+ });
+ $('.example3').toggleChildren({
items:11,
- viewMore:'View more items, dawg!',
- viewLess:'Hide the items, dawg!'
+ viewMore:'Show all #ALL# items',
+ viewLess:'Hide the items, dawg!',
+ appendToggler: function(elm, link) {
+ elm.prepend(link);
+ }
});
- $('#testdiv').preventChildren({
+ $('.example4').toggleChildren({
+ items:3,
+ createToggler: function(more, less) {
+ return $('<span>'+more+'</span>');
+ }
+ });
+ $('#testdiv').toggleChildren({
viewMore:'Show More',
viewLess:'Show Less',
moreWrapper:'<p class="wrapper">'
});
});
</script>
- <title>Limit List Size tests</title>
+ <title>jquery.toggleChildren demo</title>
</head>
<body>
-<ul class="test">
+<h1>jquery.toggleChildren</h1>
+
+<ul class="example1">
<li>one</li>
<li>two</li>
<li>three</li>
@@ -52,7 +67,7 @@
<li>sixteen</li>
</ul>
-<ul class="test">
+<ul class="example2">
<li>one</li>
<li>two</li>
<li>three</li>
@@ -71,7 +86,7 @@
<li>sixteen</li>
</ul>
-<ul class="test2">
+<ul class="example3">
<li>one</li>
<li>two</li>
<li>three</li>
@@ -90,6 +105,19 @@
<li>sixteen</li>
</ul>
+<ul class="example4">
+ <li>one</li>
+ <li>two</li>
+ <li>three</li>
+ <li>four</li>
+ <li>five</li>
+ <li>six</li>
+ <li>seven</li>
+ <li>eight</li>
+ <li>nine</li>
+ <li>ten</li>
+</ul>
+
<div id="testdiv">
<h2>headings are ok</h2>
View
@@ -1,66 +1,88 @@
-/**
- * jQuery preventChildren plugin
- * @version 0.2
- * @date April 28, 2010
- * @author Eli Dupuis
- * @copyright (c) 2009 Lift Interactive (http://liftinteractive.com)
- * Dual licensed under the MIT and GPL licenses:
- * http://www.opensource.org/licenses/mit-license.php
- * http://www.gnu.org/licenses/gpl.html
- * Requires: jQuery v1.3.2 or later (most likely works fine with earlier versions, but unteseted)
+/*!
+ * jQuery ToggleChildren Plugin
+ * Copyright (c) 2010 Eli Dupuis
+ * Version: 0.3 (June 23, 2010)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://creativecommons.org/licenses/GPL/2.0/) licenses.
+ * Requires: jQuery v1.2 or later
+ */
-*/
(function($) {
-var ver = '0.2';
+var ver = '0.3';
-jQuery.fn.preventChildren = function(options) {
+jQuery.fn.toggleChildren = function(options) {
// iterate and reformat each matched element
return this.each(function() {
- var $this = $(this);
- var opts = $.extend({}, $.fn.preventChildren.defaults, options);
+ var $this = $(this),
+ opts = $.extend({}, $.fn.toggleChildren.defaults, options),
+ children = $this.children(),
+ isCollapsed = false,
+ childOverage;
+
+ if (opts.reverse) {
+ childOverage = children.filter(':lt(' + (children.length - opts.items) + ')');
+ }else{
+ opts.items--; // account for 0th item so opts.items is visually accurate.
+ childOverage = children.filter(':gt(' + opts.items + ')');
+ };
+
- opts.items--; // account for 0th item so opts.item is visually accurate.
- var childOverage = $this.children(':gt('+opts.items+')');
+ // dynamic numbering for view all toggle links
+ // this should beb cleaned up. i'm sure there's a better way to do this...
+ opts.viewMore = opts.viewMore.replace('#ALL#', children.length);
+ opts.viewMore = opts.viewMore.replace('#HIDDEN#', childOverage.length);
+ opts.viewMore = opts.viewMore.replace('#SHOWN#', children.length-childOverage.length);
+ opts.viewLess = opts.viewLess.replace('#ALL#', children.length);
+ opts.viewLess = opts.viewLess.replace('#HIDDEN#', childOverage.length);
+ opts.viewLess = opts.viewLess.replace('#SHOWN#', children.length-childOverage.length);
+
// if we have more than limit, hide extras and attach toggle functionality:
- if($this.children().length > opts.items){
- childOverage.hide();
+ if(children.length > opts.items){
// add view more link
- var viewmore = $('<a href="#">'+opts.viewMore+'</a>').addClass('more');
- viewmore.click(function(){
- var hidden = $this.children(':hidden');
- if(hidden.length > 0){
- $this.children(':hidden').show();
+ var viewmore = opts.createToggler(opts.viewMoreText, opts.viewLessText);
+ viewmore.bind('click', function(){
+ if(isCollapsed){
+ childOverage.show();
$(this).html(opts.viewLess);
+ isCollapsed = false;
}else{
- $this.children(':gt('+opts.items+')').filter(':not(:last)').hide();
+ childOverage.hide();
$(this).html(opts.viewMore);
+ isCollapsed = true;
}
return false;
- }).appendTo($this);
- if (opts.moreWrapper) {
- viewmore.wrap(opts.moreWrapper);
- };
+ });
+ opts.appendToggler($this, viewmore);
+
+ // enter hidden state initially
+ viewmore.click();
};
});
};
// defaults
-$.fn.preventChildren.defaults = {
- items:5, // default number of list items to show
- viewMore:'View More Items', // text that is displayed in toggle link
- viewLess:'View Less Items', // text that is displayed in toggle link
- moreWrapper:false
+$.fn.toggleChildren.defaults = {
+ items: 5, // default number of list items to show
+ viewMore: 'View #HIDDEN# More Items', // text that is displayed in toggle link
+ viewLess: 'View only #SHOWN# Items', // text that is displayed in toggle link
+ reverse: false, // show the last n number of children instead of the first n
+ createToggler: function(viewMoreText, viewLessText){
+ return $('<a href="#">'+viewMoreText+'</a>');
+ },
+ appendToggler: function(element, link){
+ element.append(link);
+ }
};
+
// public function/method
-$.fn.preventChildren.ver = function() { return "jquery.preventChildren ver. " + ver; };
+$.fn.toggleChildren.ver = function() { return "jquery.toggleChildren ver. " + ver; };
// end of closure
})(jQuery);

0 comments on commit b6633b8

Please sign in to comment.