Show more / less with javascript

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

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

Code (markup):

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?

 

Found something that works great.

<style type="text/css">
.scroller {
 
    height: 400px;
    overflow:hidden;
    margin: 0px 0px 20px 0px;
}
.scroll {
    padding: 0px 0px 50px 0px;
}
 
.link {
 
    position: relative;
    cursor:pointer;
    text-decoration: underline;
    color: #444444;
    float: left;
 
}
 
</style>
 
 
<div id="scroller" class="scroller">
    <div class="scroll">
        <div id="cng" class="link" onmouseup="zxcScroller.MoreLess('scroller')">newest / click to show more</div>
 
 
PUT YOUR STUFF HERE........
 
 
 
    </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:500,          //(optional) the scroll duration in milli seconds. (default = scroll height * 2)
OnChange:function(ud){
  document.getElementById('cng').innerHTML='newest / click to show  '+(ud?'less':'more');
}
})
 
</script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Code (markup):