www.webdeveloper.com
Results 1 to 3 of 3

Thread: more/less Toggle

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    18

    more/less Toggle

    Hi!

    What I want to do make a toggle that shows "more" and "less" text. So if you click on more the div expand and show the rest of the text and less it goes back to show you just a few lines.
    Been struggling with this for a while now and any help would be helpful.

    Thank you in advance!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,372

    Lightbulb

    Goofy example, but should get you started...
    Code:
    <html>
    <head>
    <style type="text/css">
    .datesDIV {
    	width:200px;
    	height:20px;
        overflow:auto; /* hidden / auto */
      	display: none;
    }
    </style>
     
    <script type="text/javascript">
    function showML(ob,pict) {
      var doOBJ = document.getElementById(ob);
      var doPIC = document.getElementById(pict);
      if (doOBJ.style.display == 'none') {
        doOBJ.style.height = '125';		    doOBJ.style.display = 'block';
        doPIC.src = 'arrowl.gif';		    doPIC.alt = '... less';
      } else {
        doOBJ.style.height = '20';		    doOBJ.style.display = 'none';
        doPIC.src = 'arrowd.gif';		    doPIC.alt = '... more';
      }
    }
    </script>
    </head>
    <body>
    Put your heading here 
    <div id="date1" class="datesDIV" style="display:none">
     additional information associated with the first section.
     <ul>
      <li>Lorem ipsum dolor.</li>
      <li>Ut wisi enim ad.</li>
      <li>Vel illum dolore.</li>
      <li>luptatum zzril.</li>
     </ul>
     additional information associated with the second section.
    </div>
    <img src="arrowd.gif" alt="... more" onclick="showML('date1',this.id)" id="newsst1" />
    <br />
    
    Put your heading here 
    <img src="arrowd.gif" alt="... more" onclick="showML('date2',this.id)" id="newsst2" />
    <div id="date2" class="datesDIV" style="display:none">
     <ul style="list-style-type:none;">
      <li>Lorem ipsum dolor.</li>
      <li>Ut wisi enim ad.</li>
      <li>Vel illum dolore.</li>
      <li>luptatum zzril.</li>
     </ul>
    </div>
                          
    </body>
    </html>
    Modify to your heart's content.
    Good Luck!

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    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[*/
    
    .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

    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[*/
    
    .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>
    Last edited by vwphillips; 02-12-2014 at 08:16 AM.
    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/

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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