Show more / less with javascript

**qwikad.com** · 07-07-2013, 12:40 PM

I need something different from what I was able to find online:

Code:

<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "list-item";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>More<br/>
<a href="javascript:ShowContent('uniquename')" backgorund="orange">
Click to show.
</a>
<div id="uniquename" style="display:none;">
<p>"your content goes here"</p>
<a href="javascript:HideContent('uniquename')">
hide
</a>
</div>

With the code above you have to put some text before it and then the rest goes into "your content goes here" and then visitors can then view more or less.

I need a code that will allow me to put the entire content into it and then it will only show a small preview of it (maybe height: 500px) and the rest will show only if you click on "show more / less".

Any ideas?

**vwphillips** · 07-07-2013, 01:56 PM

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.scroller {
    position: absolute;
    top: 50px;
    right: 20px;
    height: 100px;
    width: 220px;
    border: solid brown 2px;
    background-color: yellow;
    overflow:hidden;
}
.scroll {
    position: absolute;
    top: 0px; left: 10px;
    width: 200px;
    font-size: medium;
    color: black;
}
span.mytitle {
    font-size: large;
    font-weight: bold;
    color: blue;
}

.button {
    position:relative;top:5px;left:50px;width:140px;background-Color:#FFCC66;text-Align:center;border:solid red 1px;cursor:pointer;margin-Top:2px;

}


</style>
</head>
<body>
<div id="scroller" class="scroller">
    <div class="scroll">
        <div id="cng" class="button" onmouseup="zxcScroller.MoreLess('scroller')">toggle</div>
        <div class="button" onmouseup="zxcScroller.MoreLess('scroller',true)">open</div>
        <div  class="button"onmouseup="zxcScroller.MoreLess('scroller',false)">close</div>
       <span style="font-size: x-large; color: red;">more</span><br/>
        This is where you put the text you want to have scroll.<br/><br/>
        <span class="mytitle">This is a title</span><br/>
        And this is some content.<br/>
        And this is some content.<br/>
        And this is some content.<br/>
        And this is some content.<br/>
        <hr/>
        <span class="mytitle">Another title</span>
        <ul>
            <li>And this is a list</li>
            <li>Of items</li>
            <li>Just demonstrating</li>
            <li>More content types</li>
        </ul>
        <hr/>
        <span class="mytitle">Announcement</span><br/>
        When in the course of human events it
        becomes necessary for one people to dissolve the political bands which have connected
        them with another and to assume among the powers of the earth, the separate and equal
        station to which the Laws of Nature and of Nature's God entitle them, a decent respect
        to the opinions of mankind requires that they should declare the causes which impel
        them to the separation.
        <br/><br/>
    </div>
</div>



<script type="text/javascript">

var zxcScroller ={

 MoreLess:function(id,ud){
  var o=this['zxc'+id],t,ms;
  if (o){
   ud=o.ud=ud===true||ud==false?ud:!o.ud;
   t=o.a[ud===true?3:2]
   ms=o.ms*Math.abs((t-o.a[4])/(o.a[2]-o.a[3]));
   o.cng?o.cng(o.ud):null;
   this.animate(o,o.a,o.a[4],t,new Date(),ms,ud?'s':'c',Math.PI/(2*ms));
  }
 },

 init:function(o){
  var id=o.ScrollerID,ms=o.Animate,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,cng=o.OnChange;
  if (s){
   var ph=p.offsetHeight,sh=s.offsetHeight;
   o.a=[p,'height',ph,sh,ph]
   o.ms=typeof(ms)=='number'&&ms>0?ms:sh*2;
   o.ud=false;
   o.cng=typeof(cng)=='function'?cng:null;
   this['zxc'+id]=o;
  }
 },

 animate:function(o,a,f,t,srt,mS,s,i){
  clearTimeout(a[5]);
  var oop=this,ms=new Date()-srt,n=s=='s'?(t-f)*Math.sin(i*ms)+f:s=='c'?t-(t-f)*Math.cos(i*ms):(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[4]=Math.max(f<0||t<0?0:n,n);
   a[0].style[a[1]]=a[4]+'px';
  }
  if (ms<mS){
   a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,s,i); },10);
  }
  else {
   a[4]=t;
   a[0].style[a[1]]=t+'px';
  }
 }



}

zxcScroller.init({
 ScrollerID:'scroller', // the unique ID name of the parent DIV.           (string)
 Animate:2000,           //(optional) the scroll duration in milli seconds. (default = scroll height * 2)
 OnChange:function(ud){
  document.getElementById('cng').innerHTML='toggle - '+(ud?'close':'open');
 }
})




</script>
</body>
</html>