How to hide/show more text within a certain length (like youtube)

Question

I want to have a text to only be a certain amount of characters/length and after that length, I want to put a link to reveal the full length of the text.

The link will be (more...). And once the user clicks the link (more..) the rest of the text will slide down.

How would I accomplish this?

Heres an example.

blah blah blah blah blah (more...) 

When the user clicks (more..), it will show the entire text.

NOTE: I am taking a about data in a table row/table cell, not just any text.

Answer 1

The secret about this effect, is wrapping the parts that you want to control with HTML tags.

$(".more").toggle(function(){     $(this).text("less..").siblings(".complete").show();     }, function(){     $(this).text("more..").siblings(".complete").hide();     }); 

---

<span class="teaser">text goes here</span>  <span class="complete"> this is the  complete text being shown</span>  <span class="more">more...</span> 

Online demo here: http://jsfiddle.net/zA23k/215/

Answer 2

$('#more').click(function(e) {     e.stopPropagation();     $('div').css({         'height': 'auto'     }) });  $(document).click(function() {     $('div').css({         'height': '40px'     }) }) 

Check working example at http://jsfiddle.net/7Vv8u/4/

With Animation http://jsfiddle.net/7Vv8u/5/

Click on Read more to expand the text. Click outside to minimize it again.