jQuery UI SlideUp

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<button type="button" id="showdiv">
  Slide Down
</button>
<button type="button" id="hidediv">
  Slide left
</button>
<div class="wrap">
  <div class="mydiv">
    <p>This is a div with long text; really extralong</p>
  </div>
</div>
<div class="bottom-div">
  This is a div below sliding div.
</div>

CSS

.ui-effects-wrapper {
  height: auto !important;
}

.wrap {}

.mydiv {
  height: 300px;
  padding: 15px 30px;
  border: 2px solid;
  background: orange;
}

.mydiv p {
  padding: 10px 30px;
  margin: -15px -30px 0;
  background: yellow;
}

.bottom-div {
  background: red;
  padding: 10px 30px;
}

JavaScript

$(function() {
  $('#showdiv').click(function() {
    $('.mydiv').show("fadeIn", {
      direction: "up",
    }, "slow");
  });

  $('#hidediv').click(function() {
    $('.mydiv').hide("fadeIn", {
      direction: "left",
    }, "slow");
  });
});