How do you avoid jQuery toggle () on a div div to make the layout move?

Question

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

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

Answer 1

You can wrap this div in another div that maintains the correct width / height to maintain a consistent layout.

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

/ , javascript . .width() .height() div css div.

Answer 2

, : hidden : none. CSS ( ), div.

Answer 3

- , , ( ), z, . , /. tutorial.