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

css, html, jquery, toggle

Solution

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.

Problem

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> ```

Original source