Return to Snippet

Revision: 45975
at May 11, 2011 21:19 by erraja_07


Initial Code
$(document).ready(function(){ 
	$(function(){
		$('#bid_desc-plaintext').keyup(function(){
		limitChars('bid_desc-plaintext', 4000, 'typed_txt_count');
		})
	});	
	
	//Code to display short and long description
	$(function(){ /* to make sure the script runs after page load */
	 
		$('.item').each(function(event){ /* select all divs with the item class */
	   
			var max_length = 150; /* set the max content length before a read more link will be added */
		   
			if($(this).html().length > max_length){ /* check for content length */
			   
				var short_content   = $(this).html().substr(0,max_length); /* split the content in two parts */
				var long_content    = $(this).html().substr(max_length);
			   
				$(this).html(short_content+
							 '<a href="#" class="read_more"><br/>Read More</a>'+
							 '<span class="more_text" style="display:none;">'+long_content+'<a href="#" class="compress"><br/>hide</a></span>'); /* Alter the html to allow the read more functionality */
							
				$(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
	 
					event.preventDefault(); /* prevent the a from changing the url */
					$(this).hide(); /* hide the read more button */
					$(this).parents('.item').find('.more_text').show(); /* show the .more_text span */
			
				});
				
				$(this).find('a.compress').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
	 
					event.preventDefault(); /* prevent the a from changing the url */
					$('.read_more').show(); /* hide the read more button */
					$(this).parents('.item').find('.more_text').slideUp(); /* show the .more_text span */
			
				});
			}
		   
		});
	 
	 
	});	
});

Initial URL
http://www.sitepoint.com/forums/javascript-15/how-create-more-link-button-display-rest-text-753129.html

Initial Description

                                

Initial Title
How to create the \"More\" link button to display rest of the text

Initial Tags

                                

Initial Language
jQuery