Read more using jQuery live event

14 Sep, 2009

Web Development » CSS, Snippets, xHTML » Read more using jQuery live event

The main purpose of this code is to have “Read more” for a long block of text (eg: comments) without having to separate the text into two div blocks and then use toggle to show/hide the 2nd block. This code simply uses CSS overflow:hidden property to hide long block of text. jQuery live event is used to ensure it works for content loaded using AJAX.

CSS

#comments .expandable .comment-body {
	height: 50px;
        overflow: hidden;
}

Javascript

$("#comments .comment-more a").live("click", function(){
	if ($(this).text() == 'more') {
		$(this).parent().parent().removeClass("expandable");
		$(this).text("less");
	} else {
		$(this).parent().parent().addClass("expandable");
		$(this).text("more");
	}
	return false;
});

HTML

<div id="comments">
	<div class="comment-content expandable">
		<div class="comment-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus adipiscing. Donec risus leo, venenatis adipiscing euismod eget, ultricies vitae nunc. Curabitur fermentum tortor vitae nisl fermentum non scelerisque erat posuere. Sed auctor tempor venenatis. Morbi vel urna turpis, adipiscing molestie nisl. Curabitur ut lorem id neque mollis fringilla. Phasellus varius viverra suscipit. Proin eleifend quam in diam dictum suscipit. Praesent eleifend fringilla turpis sit amet commodo. In ullamcorper ligula non augue bibendum ultricies scelerisque tortor congue. Aenean nulla lectus, tincidunt egestas cursus sit amet, tristique non libero. Duis facilisis blandit nisi, eget cursus turpis tristique non. Fusce sodales dolor vel ligula rutrum venenatis. Cras molestie vulputate urna at iaculis. Mauris consequat accumsan mi, non facilisis enim porttitor gravida.</p>
		<p>Suspendisse et purus a tortor aliquet vestibulum. Sed ullamcorper euismod interdum. Aenean gravida, metus ac imperdiet venenatis, neque ligula viverra urna, a pellentesque elit mi id ligula. In suscipit nunc eget magna bibendum tempor. Nunc ac mauris ut risus posuere accumsan. Nulla dictum semper justo, quis adipiscing sem consectetur quis. Donec felis arcu, convallis pretium consectetur at, semper ullamcorper urna. Proin elit nisi, vehicula eget pretium ac, faucibus vitae justo. Praesent quis arcu eget massa interdum ullamcorper in nec mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent orci nisl, mollis et egestas ut, suscipit et orci. Morbi in justo sit amet ligula facilisis interdum ac id ante. Nam sit amet metus eget augue tristique interdum vitae in metus. Vestibulum tristique vestibulum lorem, eget pharetra ante aliquet eget. Donec fermentum adipiscing sagittis. Quisque interdum, augue non vulputate rutrum, sem tortor facilisis diam, in tincidunt nisi tellus ut eros. </p>
		</div>
		<span class="comment-more"><a href="#">more</a></span>
	</div>

	<div class="comment-content expandable">
		<div class="comment-body">
		<p>Vivamus viverra arcu non nibh sollicitudin consectetur. Vivamus sodales erat a tellus semper in feugiat eros pharetra. Aenean vel magna magna, scelerisque molestie risus. Fusce lobortis euismod justo, sed gravida neque porta nec. Aenean risus metus, accumsan et mattis et, semper non erat. Fusce velit enim, viverra a pulvinar nec, viverra vel erat. Praesent sed mi quam, vel dignissim nunc. Nullam accumsan quam ut eros congue eget accumsan arcu bibendum. Nam congue egestas fringilla. Aliquam felis mi, volutpat nec tempor eu, hendrerit quis lorem. Pellentesque pretium metus quis sapien luctus venenatis vitae pretium dolor. Fusce ac tellus a tellus posuere suscipit a quis ante. Quisque ut sem eget risus consequat ornare.</p>
		<p>Nunc id risus risus, sed pellentesque nisi. Donec pulvinar nisl sit amet eros venenatis ut dictum odio pretium. Nulla hendrerit ligula a metus rutrum sed feugiat libero mattis. Nam id mi ac leo iaculis volutpat. Maecenas nec enim ut mauris convallis auctor in sed purus. Nam porta magna vitae nisl tempus in eleifend felis viverra.</p>
		</div>
		<span class="comment-more"><a href="#">more</a></span>
	</div>
</div>