[JavaScript]Odsuwanie innych divów po rozsunięciu menu Opcje

[AlKhalif]

mam taki oto kod:

Kod

<div id="mainContainer">
  <div id="menu1" class="menu">
    <input type="button" id="button1" value="Menu">
    
    <?php
            include('loginbox.php');
    ?>
    
    <div id="menu2" class="menu">
      <p>
      Link
      </p>
         <p>
      Link
      </p>
      <p>
      Link
      </p>
    </div>
  </div>

</div>
<script src="jquery-2.2.4.js"></script>
<script>
    $(document).ready(function() {
  $menu1 = $("#menu1");
  $menu2 = $("#menu2");

  $menu2.hide();
  $folded = true;

  $("#button1").click(function() {
    if ($folded) {
      $menu1.animate({
        height: '300px'
      });
      $folded = false;
    } else {
      $menu1.animate({
        height: '40px'
      });
      $folded = true;
    }
    $menu2.toggle();
  });


});
</script>
<main> </main>

Niestety po rozsunięciu menu zakrywa mi część main.
Wie ktoś jak to zrobić abu odsunęło te divy niżej aby ich nie zasłaniać?

Ten post edytował AlKhalif 31.08.2016, 12:12:23