more/less Toggle

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

gastooon

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!

JMRKER

Goofy example, but should get you started...

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

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[*/

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

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