i have made it thanks,
http://lauthiamkok.net/tmp/jquery/jquery.more_less_text/
but maybe some code master can write this better than me. here is the entire 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>