Read More

by Laxmikant Dange

HTML

<div class='readMore'>
    <div class='btn-readMore'>
        Read More &#x25BC;
    </div>
    <div class='readMore-Content'>
        
    </div>
</div>

CSS

/* Add it in real time environment
.readMore{
    position:absolute;
    bottom:0px;
}
*/
.btn-readMore::selection{
    display:none;
}

.btn-readMore{
    background-color: #66cc66;
    width: 145px;
    height: 40px;
    color:#FFF;
    font-family:"Bliss2";
    text-align:center;
    vertical-align:middle;
    line-height:40px;
    font-size: 20px;
    font-weight: 700;
    float:right;
    clear:both;
    cursor:pointer;
}
.readMore-Content{
    float:right;
    background-color: #ffffff;
    width: 1020px;
    height: 0px;
    border:1px solid #F00;/*Remove it*/
    border-top:4px solid #66cc66;
    display:none;
}

JavaScript

$('.btn-readMore').on('click',function(){
    var ht;
    if($('.readMore-Content').height()>0)
        ht=0;
    else
        ht=537;
    $('.readMore-Content').show().animate({height:ht},function(){
        if(ht==0)
            $(this).hide();
    });
});