asked on

Use setTimout / setInterval to 'slide' DIV

Hi all,
I've always had trouble getting my head around the setTimeout / setInterval functions in JavaScript. In the example below, I'm trying to create a box that can have the content portion slide down to appear, and slide up to the header to disappear. Actually, it's the same effect when using the left-hand tool boxes in Windows Explorer (on XP).

I can make the box disappear, but can't make it slide... and I know it's because there are issues with my implementation of setTimeout...

here's the code:

#### slide.htm ######################################

<html>
<head>
      <style>
            body{font-family:Verdana; font-size:0.8em}
            div.box{position:relative; width:400px; height:200px; background-color:#F1FCFE; border:1px solid #17A2C2}
            div.box h1{margin-top:0px; margin-bottom:0px; height:26px; padding-top:4px; padding-left:8px; font-size:1em; color:#FFFFFF; background-color:#6CACD9}
            div.box a{margin-left:20px}
            div.box h1 span{display:none}
            div.box p{padding:6px}
      </style>
      <script>
            function slideUp(objCross){
                  var objBox = objCross.parentNode.parentNode;
                  var objHead = objCross.parentNode;
                  var objCont = objCross.parentNode.nextSibling;
                  var objOrig = objCross.parentNode.lastChild;

                  objCont.style.display = 'none';
                  var intBox = objBox.offsetHeight;
                  var intHead = objHead.offsetHeight;
                  objOrig.appendChild(document.createTextNode(intBox));
                  var x = intBox;
                  while(x > intHead){
                        setTimeout(function(){objBox.style.height = x}, 200);
                        x--;
                  }
            }

            function slideDown(objCross){
                  var objBox = objCross.parentNode.parentNode;
                  var objHead = objCross.parentNode;
                  var objCont = objCross.parentNode.nextSibling;
                  var objOrig = objCross.parentNode.lastChild;

                  var intBox = objOrig.firstChild.nodeValue;
                  var intHead = objHead.offsetHeight;
                  objOrig.removeChild(objOrig.firstChild);
                  var x = 0;
                  while(x < intBox){
                        setTimeout(function(){objBox.style.height = x}, 200);
                        x++;
                  }
                  objCont.style.display = 'block';
            }
      </script>
</head>
<body>
      <div class="box">
            <h1>The Heading
                  <a href="#" onclick="slideUp(this)">U</a>
                  <a href="#" onclick="slideDown(this)">D</a>
                  <span class="oHeight"></span>
            </h1>
            <div class="contents">
                  <p>A paragraph of text</p>
            </div>
      </div>
</body>
</html>

#################################################

ASKER CERTIFIED SOLUTION

Basilisci

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Iain Hosking

ASKER

Spot on, thanks Basilisci.

Michel Plungjan

And do not forget to return false on the onClick
<a href="#" onclick="slideUp(this); return false">U</a>
<a href="#" onclick="slideDown(this); return false">D</a>

to stop the page from reloading