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

[code language=”javascript”]

$(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;
});

});
[/code]

Then all you have to do is add the HTML

[html]

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

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.

Focus on what matters!

Focus on what matters!

No more wasting time trying to figure out how to code it all!  Sign up below and I'll share my tips and tricks on how to build websites fast, professionaly, and with minimum code!

You have Successfully Subscribed!