Looking to expand section of a webpage vertically multiple times.

This site is best viewed in a modern browser with JavaScript enabled.

Looking to expand section of a webpage vertically multiple times.

Biorick

I has a static page with a bunch of short stories aligned vertically down a page. I need to set some thing up so that the initial view shows only five stories followed by a button that, when clicked, expands the page downward, so that 10 stories show. This is followed by another button and so on. Basically lengthening the page in "read more" increments.

I was able to get some help and the code I have does expand the page once. Is there any way to make it work more than once on a page? Here's the script I was given. I had som ething else I did, but this seems cleaner than mine... although it doesn't seem to be doing what I need it to do.

I trimmed the html protion to save space to 2 stories. Anyone have any ideas?

<html>
<head>
<script>
var incident = 1;
function open_text() {
	document.getElementById('img1').style.display = "none";
	document.getElementById('img2').style.display = "block";
	document.getElementById('a'+incident).style.display = "block";
	}
function close_text(){
	document.getElementById('img2').style.display = "none";
	document.getElementById('img1').style.display = "block";
	document.getElementById('a'+incident).style.display = "none";

if(incident < 3){
	incident++;
}else{
	incident = 1;
}
}
</script>
<style>
#a1, #a2, #a3{
	display:none;
}
#img1{
	height: 30px;
	width: 50px;
	background-image: url('../images/expander-img1.jpg');
}
#img1:hover{
	background-image: url('../images/expander-img1-over.jpg');
}
#img2{
	height: 30px;
	width: 50px;
	display:none;
	background-image: url('../images/expander-img2.jpg');
}
#img2:hover{
	background-image: url('../images/expander-img2-over.jpg');
}
</style>
<body>

<div class="container">
	<div class="sectionfull">

	<h2 class="sectiontitle">Title: This story and the next one are always visible</h2>
	<div class="subsectionfull cf">
              		<p class="body">Content 1</p>
	</div>

<hr class="line">

	<h2 class="sectiontitle">Title 2</h2>
	<div class="subsectionfull cf">
              		<p class="body">Content 2</p>
	</div>

<hr class="line">


<!--expander1-->


<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><div id="img1" onclick="open_text();"></div>
<div id="img2" onclick="close_text();"></div>

	<div id="a1" class="texter"> <!--- here's the SECOND group that is hidden until the first button is clicked-->

		<h2 class="sectiontitle">Title: This story and the next one are  visible after the first bottom above is clicked.</h2>
		<div class="subsectionfull cf">
             			 <p class="body">Content 1</p>
		</div>

	<hr class="line">

		<h2 class="sectiontitle">Title: This story and the next one are visible after the first bottom above is clicked.</h2>
		<div class="subsectionfull cf">
             			 <p class="body">Content 1</p>
		</div>

	<hr class="line">


<!--expander2-->


	<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><div id="img1" onclick="open_text();"></div>
	<div id="img2" onclick="close_text();"></div>

		<div id="a1" class="texter"> <!--- here's the SECOND group that is hidden until the first button is clicked-->

			<h2 class="sectiontitle">Title: This story and the next one are  visible after the first bottom above is clicked.</h2>
			<div class="subsectionfull cf">
             				 <p class="body">Content 1</p>
			</div>

		<hr class="line">

			<h2 class="sectiontitle">Title: This story and the next one are visible after the first bottom above is clicked.</h2>
			<div class="subsectionfull cf">
             				 <p class="body">Content 1</p>
			</div>

		<hr class="line">
<!--expander3-->

		<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><div id="img1" onclick="open_text();"></div>
		<div id="img2" onclick="close_text();"></div>

			<div id="a1" class="texter"> <!--- here's the SECOND group that is hidden until the first button is clicked-->

				<h2 class="sectiontitle">Title: This story and the next one are  visible after the first bottom above is clicked.</h2>
				<div class="subsectionfull cf">
             					 <p class="body">Content 1</p>
				</div>

			<hr class="line">

				<h2 class="sectiontitle">Title: This story and the next one are visible after the first bottom above is clicked.</h2>
				<div class="subsectionfull cf">
             					 <p class="body">Content 1</p>
				</div>

			<hr class="line">
		</div>
	</div>
</div>
</div>


</body>
</html>

vwphillips

<!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>

Biorick

In looking at this, I'm sure I need to fix the duplicate id's, I'm not sure what else I need to do to make it work more than one time. I may have the javascript all wrong for what I want to do though. Any help would be greatly appreciated.

Biorick

vwphillips;1287847 wrote:

<!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">
/*<=!=[=C=D=A=T=A=[*/
.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">
/*<=!=[=C=D=A=T=A=[*/
// 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>

Wow, that is some pretty impressive code there. Thank You! I will put it in my page and let you know how it works out!

Biorick

I'm having a little trouble with the complexity of this, but I will keep at it. (On Monday though). Just wanted to let you know that I appreciate the help.

Biorick

I think I may have it partially working. Is there a way to have an image for the button rather than the std "button" input? I'm also looking for it to be just one button that swaps from 'more' when the section is closed to 'less'' when it's open. I have all the states of the button in CSS working. I'll post that below, although the image files are local, so that won't show.

CSS code:

	/* expander button*/

#a1, #a2, #a3{
	display:none;
}
#img1{
	height: 30px;
	width: 50px;
	background-image: url('../images/expander-img1.jpg');
}
#img1:hover{
	background-image: url('../images/expander-img1-over.jpg');
}
#img2{
	height: 30px;
	width: 50px;
	display:none;
	background-image: url('../images/expander-img2.jpg');
}
#img2:hover{
	background-image: url('../images/expander-img2-over.jpg');

I am so over my head with this, but trying to figure it out.

vwphillips

<!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">
/*<=!=[=C=D=A=T=A=[*/
.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;
}
#img1{
    float:left;
    margin:10px;
    top:5px
	height: 20px;
	width: 50px;
	background-image: url(http://www.vicsjavascripts.org.uk/StdImages/1.gif);
}
#img1:hover{
	background-image: url(http://www.vicsjavascripts.org.uk/StdImages/3.gif);
}

#img2{
    overflow:hidden;
    float:left;
    margin:10px;
    height: 20px;
	width: 50px;
	background-image: url(http://www.vicsjavascripts.org.uk/StdImages/2.gif);
}
#img2:hover{
	background-image: url(http://www.vicsjavascripts.org.uk/StdImages/4.gif);
}
/*]=]=>*/
</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">
<div id="img1" >More</div><div id="img2" >Less</div>
</div>

<script type="text/javascript">
/*<=!=[=C=D=A=T=A=[*/
// 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:'img1',       //(optional) the unique ID name of the 'more' button.   (string)
 LessID:'img2',       //(optional) the unique ID name of the 'less' button.   (string)
 Animate:500          //(optional) the animation durarion in milli seconds.   (string)
});
/*]=]=>*/
</script></body>

</html>

Biorick

Thank you for this. I am still working out the kinks, but I greatly appreciate the help and generosity.