Js+CSS做出文本滑动折叠效果

<style>
  #content {
   font-size: 14px;
   width: 681px;
   height: 1px;
   background: #eee;
   padding: 0px;
   border: 1px #eee double;
   overflow: hidden;
  }
  #key {
   color: red;
   float: left;
   margin-top: 1px;
  }

<script>

  var s=20;
  var minheight=1;
  var maxheight=300;
  function shoppingcat()
  {
   var key = document.getElementById("key").title;
  
   if(content.style.pixelHeight==0)
    content.style.pixelHeight=minheight;
  
   if(key=="展开"){
    content.style.pixelHeight+=s;
   
     if(content.style.pixelHeight<maxheight){
      setTimeout("shoppingcat();",1);
     }else{
      document.getElementById("key").title="关闭";
      document.all.id_des.innerHTML = "";
     }
   }else{
     content.style.pixelHeight-=s;
     if(content.style.pixelHeight>minheight){
      setTimeout("shoppingcat();",1);
     }else{
      document.getElementById("key").title="展开";
      document.all.id_des.innerHTML = eWebEditor1.getHTML();
     }
   // document.getElementById("show").innerHTML = eWebEditor1.getHTML();
   }
  
  }
  </script>

<TR>
      <TD onclick="shoppingcat();">
       产品描述<font color="red">*</font>
       <span id="key" onclick="shoppingcat();" title="展开"></span></TD>      
      <TD colspan="3" onclick="shoppingcat();" id="show">  
      <table ><tr><td id="id_des">
       
      </td></tr></table> 
      <div id="content">
       <INPUT type="hidden" name="content1" value="" >
       <IFRAME ID="eWebEditor1" src="eWebEditor.jsp?id=content1&style=standard"
        frameborder="0" scrolling="no" width="681" height="300"></IFRAME>
      </div> 
      </TD>      
     </TR>