<html>
<head>
<title>展的折叠、展开</title>
<style> 
#content {
  font-size: 14px;
  width: 1000px;
  height: 500px;
  background: #eee;
  padding: 10px;
  border: 4px #ccc double;
  overflow: hidden;
}
#key {
  color: red;
  float: right;
  margin-top: 0px;
}
</style>
<script>
var s=50;
var minheight=50;
var maxheight=500;
function shoppingcat(){
  var key = document.getElementById("key").innerText;
  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").innerText="关闭";
    }
  }else{
    content.style.pixelHeight-=s;
    if(content.style.pixelHeight>minheight){
      setTimeout("shoppingcat();",1);
    }else{
      document.getElementById("key").innerText="展开";
    }
  }
}
</script>
</head>
<body>
  <span id="key" οnclick="shoppingcat();">展开</span>
  <div id="content"> 
    源码爱好者
    <br><br>
    源码爱好者源码下载。
  </div>
</body>
</html>