SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<div class="char-lpool">
<div style="height: 300px;"></div>
<div class="outer">
    <div class="inner">
        <p>First line visable.</p>
        <span class="expand">Read more</span>
        <p class="fade">Line one</p>
        <p class="fade">Line two</p>
        <p class="fade">Line three</p>
        <p class="fade">Line four</p>
    </div>
</div>
</div>

CSS

.inner {
    position:relative;
    left:100px;
    width:260px;
    padding:8px 14px 10px 14px;
    background:#FFF;
    border:1px solid #CAC9C1;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px }

.inner span.expand {
    top:10px;
    right:10px;
    display:block;
    width:92px;
    height:12px;
    cursor:pointer;
}

.inner span.expand:hover { background-position:-580px -478px }

.inner p.fade { display:none }

.expand {

JavaScript

$('.char-lpool .expand').click(function(){
  $(this).stop().fadeOut({duration:200})
         .parent().stop().animate(
           {top:"-240"}, 
           300,
           'easeOutCubic', 
           function() { $(this).find('p.fade').stop().fadeIn(200); }
         );
});