See More

by Arpit Agrawal

HTML

<div id='mydiv'>This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. </div>
<div id='seemore'>See More</div>

CSS

#mydiv{
    text-align: justify;
    line-height: 20px;
    height: 80px;
    width: 300px;
    overflow: hidden;
    border: 1px #ddd solid;
}
#seemore{
    width: 300px;
    height: 20px;
    border: 1px #ddd solid;
    text-align: center;
    cursor: pointer;
}

JavaScript

minheight= 80;
$("#seemore").click(function(){
    totalheight=document.getElementById("mydiv").scrollHeight||$("#mydiv").height()
    if($("#mydiv").height()<totalheight){
      $("#mydiv").height(totalheight);
      $("#seemore").html("See Less");
    }
    else{
      $("#mydiv").height(minheight);
      $("#seemore").html("See More");
    }
});