Advanced Search

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

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $(document).ready(function(){ 
  2. 	$(function(){
  3. 		$('#bid_desc-plaintext').keyup(function(){
  4. 		limitChars('bid_desc-plaintext', 4000, 'typed_txt_count');
  5. 		})
  6. 	});	
  7.  
  8. 	//Code to display short and long description
  9. 	$(function(){ /* to make sure the script runs after page load */
  10.  
  11. 		$('.item').each(function(event){ /* select all divs with the item class */
  12.  
  13. 			var max_length = 150; /* set the max content length before a read more link will be added */
  14.  
  15. 			if($(this).html().length > max_length){ /* check for content length */
  16.  
  17. 				var short_content   = $(this).html().substr(0,max_length); /* split the content in two parts */
  18. 				var long_content    = $(this).html().substr(max_length);
  19.  
  20. 				$(this).html(short_content+
  21. 							 '<a href="#" class="read_more"><br/>Read More</a>'+
  22. 							 '<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 */
  23.  
  24. 				$(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 */
  25.  
  26. 					event.preventDefault(); /* prevent the a from changing the url */
  27. 					$(this).hide(); /* hide the read more button */
  28. 					$(this).parents('.item').find('.more_text').show(); /* show the .more_text span */
  29.  
  30. 				});
  31.  
  32. 				$(this).find('a.compress').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
  33.  
  34. 					event.preventDefault(); /* prevent the a from changing the url */
  35. 					$('.read_more').show(); /* hide the read more button */
  36. 					$(this).parents('.item').find('.more_text').slideUp(); /* show the .more_text span */
  37.  
  38. 				});
  39. 			}
  40.  
  41. 		});
  42.  
  43.  
  44. 	});	
  45. });

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.