jQuery Simple Toggle Read More Read Less

Using a jQuery Simple Toggle Script is all fine and dandy, but what if you want to add a little something extra.

What if you want it to say Read More, then when you click it, it says “Read Less”? How about an Open and Close button?

Here’s the snippet.

jQuery Simple Toggle Script – Read More Read Less


$(document).ready(function(){
$('.hiddenText').after('

Read More

')

	 $('p.readMore').click(function(){
			   $(this).prev().slideToggle(function() {
				   $(this).next('p.readMore').text(function (index, text) {
	           	   		return (text == 'Read More' ? 'Read Less' : 'Read More');
	        	   });
			   });

	           return false;
	});

});

Then all you have to do is add the HTML


This is a paragraph with hidden text after it.
<div class="hiddenText">Blah blah blah</div>

The code will add a Read More directly BEFORE the hiddenText class. So that when it’s clicked, the hidden text will show and the “Read More” then becomes “Read Less”.

You can just as well do this with any words you want, just keep it consistent.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>