There’s a couple of ways you can do this, depending on the length of the content, how many items are displayed and the type of content it might be better to limit the text through PHP and then request the rest through AJAX.
Since I guess this is a few steps too far and probably not needed, this is how you do it with pure jQuery.
(If you aren’t using jQuery yet, download it from jquery.com, it improves javascript by a lot and you’ll need it to use the following code)
Imagine your HTML looks like this:
<div class="item">
This is the first part of the text, the part that will be seen originally.<br/>
<a href="#" class="read_more">Read More</a><br/>
<span class="more_text">
This is the extra text, that will be shown after pressing the link above.
</span>
</div>
What we’re going to do through jQuery is find all ‘a’ elements with the read_more class, and bind those to an event that will show the span.more_text that is next to it.
$(function(){ /* to make sure the script runs after page load */
$('a.read_more').click(function(event){ /* find all a.read_more elements and bind the following code to them */
event.preventDefault(); /* prevent the a from changing the url */
$(this).parents('.item').find('.more_text').show(); /* show the .more_text span */
});
});