javascript 实现div 窗体右下角伸缩

下面这段代码，我想放到右下角，但是问题是，虽然我这能展开，但是 我想要的是一般网站上那样，一加载网页，右下角只显示展开这个div露个头，其余内容全藏，只要一点击展开，内容就自动把展开这个div层顶上来了，此时这div内容变成关闭了，然后再点，关闭，这个关闭的div层也顺着下来了，一直到低端，如此可以反复点击
但是我现在的样子是点击展开之后不是我预想的那样顶着展开div向上，二是内容向下了，而显示的部分都在那窗体下面，看不见，我该怎么才能实现我想要的效果啊
 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script>        
         var s = 5;
         var minHeight = 0;
         var maxHeight = 150;
         function shopwhith() {
  
             var key = document.getElementById("Span1").innerText;
             if (key == "展开") {
                 dv1.style.pixelHeight += s; //增加div高度
                 if (dv1.style.pixelHeight < maxHeight) {
                     setTimeout("shopwhith();", 1);
                 }
                 else {
                     document.getElementById("Span1").innerText = "关闭";
                 }
             }
             else {
                 dv1.style.pixelHeight -= s;                 if (dv1.style.pixelHeight > minHeight) {
                     setTimeout("shopwhith();", 1);
                 }
                 else {
                     document.getElementById("Span1").innerText = "展开";
                 }
             }
         }     </script>
     
    
</head>
<body>
    <form id="form1" runat="server">
    <div style="position:absolute; top: 500px; left: 957px;">
     <div style=" background-color:Green; width: 236px; ">
            <span id="Span1" onclick="shopwhith()">展开</span>
    </div>
    <div id="dv1" style=" overflow: hidden; width: 236px; height:0px; background-color:Blue">    类容类容类容类容类容类容类容<br />
    类容类容类容类容类容类容类容<br />
    类容类容类容类容类容类容类容<br />
    类容类容类容类容类容类容类容<br />
    类容类容类容类容类容类容类容<br />
    类容类容类容类容类容类容类容<br />
    类容类容类容类容类容类容类容<br />
    类容类容类容类容类容类容类容<br />
    类容类容类容类容类容类容类容 
    </div>
</div>
    </form>
  
</body></html>