<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.More {
position:absolute;z-Index:101;left:165px;top:30px;width:25px;height:15px;background-Color:#FFFFCC;font-Size:10px;border:solid red 1px;cursor:pointer
}
.Less {
background-Color:#CCFFFF;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function MoreLess(obj,min,m,l){
var p=obj.parentNode;
obj.className=obj.className==m?m+' '+l:m;
obj.innerHTML?obj.innerHTML=obj.innerHTML==m?l:m:null;
p.style.height=(obj.className==m?min:p.scrollHeight)+'px';
obj.style.top=(obj.className==m?min:p.scrollHeight)-5-obj.offsetHeight+'px';
}
/*]]>*/
</script>
</head>
<body>
<div style="position:relative;overflow:hidden;width:200px;height:50px;left:200px;border:solid red 1px;">
<div class="More" onmouseup="MoreLess(this,50,'More','Less');">More</div>
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content Last
</div>
</body>
</html>
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.More {
position:absolute;z-Index:101;left:165px;top:30px;width:25px;height:15px;background-Color:#FFFFCC;font-Size:10px;border:solid red 1px;cursor:pointer
}
.Less {
background-Color:#CCFFFF;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function MoreLess(obj,min,m,l,ms){
var p=obj.parentNode;
obj.className=obj.className==m?m+' '+l:m;
obj.innerHTML?obj.innerHTML=obj.innerHTML==m?l:m:null;
obj.style.top='-3000px';
animate(p,p.offsetHeight,obj.className==m?min:p.scrollHeight,new Date(),typeof(ms)=='number'&&ms>0?ms:20,obj);
}
function animate(o,f,t,srt,mS,obj){
clearTimeout(o.to);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
o.style.height=Math.max(0,n)+'px';
}
if (ms<mS){
o.to=setTimeout(function(){ oop.animate(o,f,t,srt,mS,obj); },10);
}
else {
o.style.height=t+'px';
obj.style.top=t-5-obj.offsetHeight+'px';
}
}
/*]]>*/
</script>
</head>
<body>
<div style="position:relative;overflow:hidden;width:200px;height:50px;left:200px;border:solid red 1px;">
<div class="More" onmouseup="MoreLess(this,50,'More','Less',1000);">More</div>
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content<br />
Some Content Last
</div>
</body>
</html>