Google+ Tools
Make Google+ profile picture
Make Google plus banners for profile
Create and share your Google Plus profile banners.

Profile image for mrk studios praveensewak on June 1, 2012

jQuery shorten content inside container.

Language
jQuery
Tags

jQuery Shorten paragraphs


/*
Author: 	Praveen Sewak
Date: 		01/06/2012
URL:		http://www.praveensewak.com/
Credits: 	Based on jQuery Shorten lib by Viral Patel: http://bit.ly/fBrElf (Thanks dude!).
			I just added functionality so that it shows/hides elements inside a container ('div > p')
*/

(function($){
	$.fn.shorten = function (settings) {
		var config = {
			item: "p",
			showItems: 2,
			moreText: "more",
			moreClass: "morelink",
			lessText: "less",
			toggleSpeed: "fast"
		};
		
		if(settings){
			$.extend(config, settings);
		}
		
		$('.morelink').live('click', function(){
			var $this = $(this);
			if($this.hasClass('less')){
				$this.removeClass('less');
				$this.html(config.moreText);
			}else{
				$this.addClass('less');
				$this.html(config.lessText);
			}
			$('.shorten_extra', $this.parent()).slideToggle(config.toggleSpeed, 'linear');
			return false;
		});
		
		return this.each(function(){
			var $this = $(this);
			var content = $this.html();
			var count = $(config.item, $this).size();
			
			if(count > config.showItems){
				var pre = '';
				for(i=0;i<config.showItems;i++){
					pre += $(config.item + ':eq(' + i + ')', $this)[0].outerHTML;
				}
				var extra = '';
				for(i=config.showItems;i<count;i++){
					extra += $(config.item + ':eq(' + i + ')', $this)[0].outerHTML;
				}
			}
			var html = '<span class="shorten_original">' + pre + '</span><span class="shorten_extra">' + extra + '</span><a href="javascript://nop/" class="' + config.moreClass + '">' + config.moreText + '</a>';
			$this.html(html);
			$('.shorten_extra').hide();
		});
	};
})(jQuery);

Comments

blog comments powered by Disqus