Collapsing DIVs with JQuery

Question

Hello,

I have a page with two divs on it. This page looks like the following:

<div id="waitDiv">
  <div id="waitText">Analyzing...</div>
  <img src="wait.gif" />
</div>

<div id="finishedDiv" style="visibility:collapse;">
  <div>You may now proceed</div>
  <div>Please remember that....</div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    var progressTimer = setTimeout("updateState()", 5000);
  });

  var count = 1;
  function updateState() {
    if (count <= 5) {
      var progressTimer = setTimeout("updateState()", 5000);
      count = count + 1;
    }
    else {
      $("#waitDiv").css("visibility", "collapse");
      $("#finishedDiv").css("visibility", "visible");
    }
  }
</script>

Basically, when the page loads, I need it to wait for a bit of time. Then, I need to show the information in the finishedDiv when the time has elapsed. Currently, the finishedDiv does show. However, it shows below the waitDiv. The waitDiv goes invisible. But, I need the finishedDiv to be positioned where the waitDiv was. Why does the finishedDiv appear below the waitDiv even though I collapse it?

Thank you!

Answer 1

Instead of visibility: collapse; you should use display: none in this case, so it takes up no space in the page.

Some other suggestions: don't pass a string to setTimeout, pass the function and you can use .hide() and .show() for that display: none I was talking about, like this:

$(document).ready(function () {
  var progressTimer = setTimeout(updateState, 5000);
});

var count = 1;
function updateState() {
  if (count <= 5) {
    var progressTimer = setTimeout(updateState, 5000);
    count = count + 1;
  }
  else {
    $("#waitDiv").hide();     //display: none;
    $("#finishedDiv").show(); //restore display, in this case display: block;
  }
}

Just also change the #finishedDiv to be hidden the same way initially, like this:

<div id="finishedDiv" style="display: none;">

Instead of .show() you could also use .fadeIn() for example, to add a bit of flair if you wanted.

Answer 2

The collapse visibility applies to only to table elements, so it's really up to the browser as to how to show a collapsed div. You should try setting display to none and see if that achieves the effect you want.

Answer 3

Use "display:none" as the initial style for finishedDiv, so it is not even put into the layout of the page. Then you can simply use toggle() to make it visible:

Unrelated, you can avoid use of eval(...) by specifying the name of the function to be called by setTimeout(...)

$(document).ready(function () {
  var progressTimer = setTimeout(updateState, 5000);
});

var count = 1;
function updateState() {
  if (count <= 5) {
    var progressTimer = setTimeout(updateState, 5000);
    count = count + 1;
  }
  else {
    $("#waitDiv").toggle();
    $("#finishedDiv").toggle();
  }
}

​