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.