How do you avoid JQuery toggle() on a layout div from causing your layout to move around?

Question

I have a JQuery function that toggles one of the divs in my layout. The problem is that the whole layout moves around on the screen when the div appears or disappears. Is there a way to achieve the same show/hide effect without altering the layout?

<script>
  $(document).ready(function(){
    $("button").click(function () {
      $("#layoutDiv").toggle();
    });
  });
</script>

Answer 1

You could wrap that div in another div that maintains the proper width/height to keep the layout consistent.

<div style="width:300px;height:200px">
  <div class="animateMe">
    <p>When I close, the outer div will still be there.</p>
  </div>
</div>

If you don't know the height/width before hand, you could set it programmatically with javascript when the page loads. Just get the .width() and .height() values of the collapsible div and apply them to the css of the outer div.

Answer 2

Try writing a new function that uses visibility: hidden instead of display: none. That will maintain the CSS box (and the layout) without showing the div.

Answer 3

Jonathan Sampson's answer will work - alternatively without knowing what exactly you're doing (the markup, and the required effect) I would use absolute positioning with a high z-index, which will take it out of document flow. This is what modal windows / lightboxes generally use. Here's a tutorial.