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 w

Answer 1

This is another solution using clickable articles (can of course be changed to anything).

http://jsfiddle.net/SqJ53/2/

Edit: If you want to use CSS animation, you must use MAX-HEIGHT instead of HEIGHT

Javascript

$(".container article").click(function() {
        $(this).toggleClass("expand");
})

CSS

.container {
    position: relative;
    width: 900px;
    height: auto;
}
.container article {
    position: relative;
    border: 1px solid #999;
    height: auto;
    max-height: 105px;
    overflow: hidden;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out; 
}
.container article:hover {
    background: #dadada;
}
.container article.expand {
    max-height: 900px;
}

HTML

    

        
Section 1
        
This is my super long content, just check me out.
        
This is my super long content, just check me out.
        
This is my super long content, just check me out.
        
This is my super long content, just check me out.
    

    

        
Section 2
        
This is my super long content, just check me out.
        
This is my super long content, just check me out.
        
This is my super long content, just check me out.
        
This is my super long content, just check me out.