More - Less

by narensrinivasans

HTML

<div class="container">
    <h4>Title
        <a class="right more">More</a>
        <a class="right less">Less</a>
    </h4>
    <div class="containerClass" id="commentDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat semper turpis non porta. Nulla facilisi. Suspendisse egestas erat eu metus sagittis, nec ultrices lectus tempus.</p>
        <p>Etiam lacinia magna est, eget ullamcorper odio ultricies ac. Sed consequat nisl et eros dictum aliquam eget in dui. Nunc sagittis, magna eget aliquet elementum, urna nulla posuere erat, ut luctus arcu ante nec quam. Fusce tincidunt tincidunt orci nec volutpat. Morbi congue, felis vitae scelerisque aliquam, nisl diam blandit diam, nec accumsan lacus enim eu augue. Quisque rhoncus dui fringilla augue varius tempor id vitae odio.</p>
        <p>Phasellus aliquet hendrerit mauris in molestie. Aenean euismod, sapien et commodo vehicula, diam risus hendrerit lorem, id pharetra metus dui eu quam. Curabitur consectetur tortor id erat convallis, in bibendum neque tincidunt.

Vestibulum tincidunt mauris nisi, dapibus tincidunt libero convallis at. </p>
    </div>
</div>

CSS

.container
{
    border:1px solid #999;
    overflow:hidden;
}
.container h4
{
    padding:4px;
    background:whitesmoke;
}
.containerClass
{
    height:150px;
    
}
.right
{
    float:right;
}
.less
{
    display:none;
}
a
{
    cursor:pointer;
    color:#00b;
}
}

JavaScript

$('.more').click(function(){
		$(this).hide(); $('.less').show();							  
        var cmtheight = document.getElementById('commentDiv').scrollHeight;
        $('.containerClass').animate({height: cmtheight});
	});
	$('.less').click(function(){
		$(this).hide(); $('.more').show();	
        $('.containerClass').animate({height: '150px'});
	});