suppose that we have three elements in an HTML file that one of them (the middle one; .div2) is hidden. I'm trying to unhide the hidden element (.div2) and hide the first element (.div1) by clicking on a button using jQuery. But the problem is when I hide the first element (.div1) and unhide the hidden element (.div2), the next element (third one; .div3) slides up and is mixed with the unhidden element.

What should I do to solve this?

```js
$(function($) {
  $(".myButton").click(function() {
    $(".div1").fadeOut();
    $(".div2").fadeIn(500);
  });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myButton">Hide</button>
<div class="div1">Element 1 - will be hidden</div>
<div class="div2" style="display: none;">Element 2 - the hidden element</div>
<div class="div3">Element 3 - the one which will slide up and mess with element 2 </div>
```

The messed up result is as the image:
[The result after clicking the button](https://i.stack.imgur.com/EEnvM.jpg)

As you see, there's a form field (element 2) behind a map (element 3), which I want the map stays at the bottom of the form field and not to slides up.