Quick and Easy jQuery Read More Script Tutorial

Introduction

Alright, back to jQuery tutorial after a long break. This time will be pretty simple script that hide the extra length of a long paragraph and toggle hide and show the extra sentence. I created it few days ago for the comment moderation in the backend, normally what I do is list out all the comment (with pagination of course) and display the first 20 words of the comment (following by 3 dots :)), and also a set of control such as view, approve and delete buttons. However, I found it annoying because if the comment is too long, you can't really read the comment from the list, because of that I will have to click on the view button to view it in another page. That's waste of time and bandwidth if you have a lot of comments to approve!

So I decided to make it easier, and that's when this script came into my mind. It able to hide the long comment and view it if the user wants to, then publish it. Simple and can be extremely useful! So, here we go, start with the first section - HTML

1. HTML

HTML is pretty basic, don't freak out because of the length of the following html, what we really need to pay attention is the P Tag with excerpt class. That is the description and will be reformatted by jQuery script.

<div class="row">
	<div class="img">
		<a href="http://www.link.com"><img src="images.gif" alt="" /></a>
	</div>
	<div class="desc">
		<h2><a href="http://www.link.com/">Lorem Ipsum der a lor</a></h2>
		<p class="excerpt">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna.</p>
	</div>
	<div class="clear"></div>
</div>

2. CSS

CSS is not important as well :). The following is the basic styling I used in the demostration. We do not have to worry about CSS for this tutorial!

	/* normal formating */
#table {
	margin:0 auto; 
	width:680px; 
	font-family:arial; 
	font-size:12px; 
	color:#333;
}

	#table .row {
		margin:15px 0 5px 0; 
		border-bottom:1px dotted #c4c4c4;
	}

	#table .img {
		width:160px; 
		height:100px; 
		float:left;
	}

	#table .img img {
		width:160px; 
		height:100px; 
		border:2px solid #333;
	}

	#table .desc {
		width:500px; 
		height:120px; 
		float:right;
	}
	
	#table .desc a {
		color:#2a8cba; 
		text-decoration:none;
	}
		
	#table .desc span {
		width:50px;
	}

	#table h2 {
		font-size:20px; 
		margin:0 0 5px 0; 
		padding:0;
	}
#table h2 a {text-decoration:none;}
.clear {clear:both}

3. Javascript

Alright, this is the core of the tutorial. What it does:

1. Loop through the HTML tags that have a class called excerpt
2. Then, grab the sentence in the element and reformat it so the length is checked and added necessary HTML elements.
3. Lastly, in the click event, toggle hide and show of the extra content.

It's pretty straight forward, I have added inline comment for each of the section in the jQuery script for better understanding of what it really does. One thing though, I should have use the is(':visible') instead of hasClass('hide'), but apparently, IE8 is having problem to execute it, I don't really know what's wrong because i tried it in Firefox and Chrome, they both work perfectly fine. Just one of a random faulty behaviors from Microsoft Internet Explorer I guess.

	$(function () {

		// Grab all the excerpt class
		$('.excerpt').each(function () {
		
			// Run formatWord function and specify the length of words display to viewer
			$(this).html(formatWords($(this).html(), 30));
			
			// Hide the extra words
			$(this).children('span').hide();
		
		// Apply click event to read more link
		}).click(function () {

			// Grab the hidden span and anchor
			var more_text = $(this).children('span.more_text');
			var more_link = $(this).children('a.more_link');
				
			// Toggle visibility using hasClass
			// I know you can use is(':visible') but it doesn't work in IE8 somehow...
			if (more_text.hasClass('hide')) {
				more_text.show();
				more_link.html(' » hide');		
				more_text.removeClass('hide');
			} else {
				more_text.hide();
				more_link.html(' « more');			
				more_text.addClass('hide');
			}

			return false;
		
		});
	});

	// Accept a paragraph and return a formatted paragraph with additional html tags
	function formatWords(sentence, show) {

		// split all the words and store it in an array
		var words = sentence.split(' ');
		var new_sentence = '';

		// loop through each word
		for (i = 0; i < words.length; i++) {
	
			// process words that will visible to viewer
			if (i <= show) {
				new_sentence += words[i] + ' ';
				
			// process the rest of the words
			} else {
		
				// add a span at start
				if (i == (show + 1)) new_sentence += '... ';		

				new_sentence += words[i] + ' ';
			
				// close the span tag and add read more link in the very end
				if (words[i+1] == null) new_sentence += ' » more';
			} 		
		} 
	
		return new_sentence;

	}

Conclusion

That's about it, it's simple and can be really useful to solve the space problem in the design. I hope you enjoyed it and feel free to browse around for more tutorials and design inspirations.