<!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[*/
.page {
width:500px;height:500px;background-Color:#FFFFCC;border:solid red 1px;
}
.hide {
display:none;
}
.controls {
width:500px;height:50px;background-Color:#FFCC66;border:solid red 1px;
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="More" onmouseup="zxcPageMoreLess.MoreLess('page',1);"/>
<input type="button" name="" value="Less" onmouseup="zxcPageMoreLess.MoreLess('page',-1);" />
<br />
<div id="page0" class="page">Stories 1 to 5</div>
<div id="page1" class="page hide">Stories 6 to 10</div>
<div id="page2" class="page hide">Stories 11 to 15</div>
<div class="controls">
<input id="more" type="button" name="" value="More" /><input class="less" type="button" name="" value="Less" id="less" class="hide" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
// More Less (20-September-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcPageMoreLess={
MoreLess:function(cls,ud){
var o=this['zxc'+cls],n;
if (o){
n=o.n+(ud>0?1:0);
if (o.ary[n]&&n>0){
o.ary[n][0].style.display='block';
this.animate(o,o.ary[n],o.ary[n][2],ud>0?o.ary[n][1]:0,new Date(),o.ms);
o.n=n+(ud>0?0:-1);
o.m?o.m.style.visibility=o.ary[o.n+1]?'visible':'hidden':null;
o.l?o.l.style.visibility=o.n>0?'visible':'hidden':null;
}
}
},
init:function(o){
var cls=o.CommonClass,pgs=document.getElementsByTagName('DIV'),ary=[],m=document.getElementById(o.MoreID),l=document.getElementById(o.LessID),ms=o.Animate,z0=0;
for (;z0<pgs.length;z0++){
if ((' '+pgs[z0].className+' ').match(' '+cls+' ')){
pgs[z0].style.display='block';
pgs[z0].style.overflow='hidden';
ary.push([pgs[z0],pgs[z0].offsetHeight,0]);
pgs[z0].style.display=ary.length>1?'none':'block';
}
}
m?this.addevt(m,'mouseup','MoreLess',cls,1):null;
l?this.addevt(l,'mouseup','MoreLess',cls,-1):null;
l?l.style.visibility='hidden':null;
o.m=m;
o.l=l;
o.ary=ary;
o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
o.n=0;
this['zxc'+cls]=o;
},
animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[2]=Math.max(n,0);
a[0].style.height=a[2]+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[2]=t;
a[0].style.height=t+'px';
t==0?a[0].style.display='none':null;
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcPageMoreLess.init({
CommonClass:'page', // the common class name of the stories container DIVs. (string)
MoreID:'more', //(optional) the unique ID name of the 'more' button. (string)
LessID:'less', //(optional) the unique ID name of the 'less' button. (string)
Animate:500 //(optional) the animation durarion in milli seconds. (string)
});
/*]]>*/
</script></body>
</html>