Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

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.

Advertisement
About the Author

What’s UP! This is my site, I write 99% of the articles on here. I’m also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I’ve made courses and have a membership as well to help get you on your feet!

0 comments on jQuery Simple Toggle Read More Read Less

  1. hamidi says:

    thanks………….

  2. Lablance says:

    can i integrates this button in blogspot?

    1. surefireweb says:

      Not really sure how blogspot works but as long as you have access to an area where you can add javascript, I don’t see why not.

  3. Rahul says:

    Hi, how can i seperate the “Read more” from the “…” ? I need to show the Read More somewhere else and not at the end of the content.

Leave a Reply

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

Scroll to top