jquery: view more/ view less text

**lauthiamkok** · Jul 19, 2009, 07:49

Hi,
How can i do a text extract like this,

http://www.apple.com/trailers/universal/despicableme/

where u can click to view more text and then click view less when u like to...

thanks,
Lau

**CyberAlien** · Jul 19, 2009, 11:50

Try something like this:

Code:

<p class="whatever">
first part of text
 <span style="display: none;"> second part of text </span>
</p>
<a href="javascript:void(0);" onclick="var block = $('p.whatever span'); $(this).html((block.is(':visible')) ? 'View more' : 'View less'); block.slideToggle(); return false;">View more</a>

**lauthiamkok** · Jul 19, 2009, 16:17

i have made it thanks,

http://lauthiamkok.net/tmp/jquery/jq...ore_less_text/

but maybe some code master can write this better than me. here is the entire code,

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
	var text = $('#content').html();
	var extract = text.substring(0,300) + "...";
	$('#content').html(extract);
	$('#button').html('<a href="#" class="more">Show More</a>');
	more(text);					
});	

this.more = function(text){	
$('.more').click(function () {
		$('#content').html(text);
		$('#content').append('<div class="position"></div>');
		position();
		$('#button').html('<a href="#" class="less">Show Less</a>');
		return false;
	});
}

this.position = function(){	
	var p = $(".position");
	var position = p.position();
	var pos_top = position.top;
	$('#content').animate({height:pos_top+'px'}, function(){
		less();
	});	
}

this.less = function(){	
$('.less').click(function () {
	$('#content').animate({height:'100px'}, function(){
		var text = $('#content').html();
		var extract = text.substring(0,300) + "...";
		$('#content').html(extract);
		$('#button').html('<a href="#" class="more">Show More</a>');
		more(text);
		});	
		return false;
	});
}
</script>
<style>

div {
	clear:both;
	}
	
p {
	margin:0px 0px 20px 0px;
	clear:both;
	}
	
#content{ 
	height:100px; 
	width:400px; 
	overflow:hidden; 
	border: 1px solid #0000FF;
	}
	
.less{
	color:#FF0000;
	}
	
.more{ 
	font-weight:bold;
	}
	

</style>

</head>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit erat sed enim convallis tincidunt. Vivamus vestibulum hendrerit blandit. Donec sagittis magna justo. Sed vehicula auctor mauris quis dictum. Aliquam erat volutpat. Phasellus at quam nibh, sed dictum neque. Maecenas lectus arcu, sagittis quis dapibus sed, lobortis id velit. Vestibulum ut tortor neque. </p>

<p>Phasellus accumsan aliquam quam, vitae fermentum purus pellentesque quis. Aliquam viverra lacus at tortor scelerisque vestibulum eget vitae orci. Etiam volutpat neque non erat facilisis egestas. Duis vulputate lacus eget nulla mattis vulputate. Fusce vehicula libero dolor, vitae tempor nulla. Vestibulum ut tortor neque. Quisque porttitor ornare massa sit amet ornare.</p>
</div>

<div id="button"></div>

</body>

</html>

The SitePoint Forums have moved.

User Tag List

Thread: jquery: view more/ view less text

Thread Tools

Display

jquery: view more/ view less text

Bookmarks

Bookmarks

Posting Permissions