jQuery UI remove inline styles

by Iqbal Kabir

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">
  Show Div
</button>
<button type="button" id="hidediv">
  Hide Div
</button>
<div class="wrap">

  <div class="mydiv">
    <p>This is a div with long text; really extralong</p>
  </div>
</div>

CSS

.wrap {
  width: 90px;
  height: 30px;
  padding: 0 30px;
  background: olive;
  position: relative;
}

.mydiv {
  width: auto;
  height: 300px;
  padding: 15px 30px;
  border: 2px solid;
  background: orange;
  display: none;
  position: absolute;
  left: 100%;
  top: 100%;
  white-space: nowrap;
}

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

JavaScript

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

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