www.webdeveloper.com
Results 1 to 8 of 8

Thread: Looking to expand section of a webpage vertically multiple times.

  1. #1
    Join Date
    Sep 2013
    Posts
    6

    Looking to expand section of a webpage vertically multiple times.

    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?

    Code:
    <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>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    Code:
    <!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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Sep 2013
    Posts
    6
    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.

  4. #4
    Join Date
    Sep 2013
    Posts
    6
    Quote Originally Posted by vwphillips View Post
    Code:
    <!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!

  5. #5
    Join Date
    Sep 2013
    Posts
    6
    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.

  6. #6
    Join Date
    Sep 2013
    Posts
    6
    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:

    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.

  7. #7
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    Code:
    <!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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Sep 2013
    Posts
    6
    Thank you for this. I am still working out the kinks, but I greatly appreciate the help and generosity.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles