Posted By

praveensewak on 06/01/12

Tagged

jquery

Versions (?)

Last Edited at 06/01/12 02:10pm

Statistics

Viewed 465 times

Favorited by 0 user(s)

Related snippets

jQuery Shorten paragraphs

/ Published in: jQuery

jQuery shorten content inside container.

Highlighted TextExpand

/*
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);

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.