Div toggle animation

Question

Complete js newbie here, so sorry if im asking a stupid question :)

I have a navigation that toggles several divs, each link opens its own div, like this:

<div class="drawer" id="link1" style="display: none">First link content</div>
<div class="drawer" id="link2" style="display: none">Second link content</div>
<div class="drawer" id="link3" style="display: none">Third link content</div>
<nav>
    <ul>
        <li><a href="#" class="menu" data-item="#link1">Link 1</a></li>
        <li><a href="#" class="menu" data-item="#link2">Link 2</a></li>
        <li><a href="#" class="menu" data-item="#link3">Link 3</a></li>
        <li><a href="#">External link</a></li>
    </ul>
</nav>

And the code that runs it:

$(document).ready(function () {
    $('.menu').click(function () {
        var $clicked = $(this)
        $('.menu').each(function () {
            var $menu = $(this);
            if (!$menu.is($clicked)) {
                $($menu.attr('data-item')).hide();
            }
        });
        $($clicked.attr('data-item')).toggle();
    });
});

It works well, but instead of simple showing/disappearing, i would wish to have slide up/down toggle effect on the divs when they are triggered.

I know there are slideUp and slideDown effects, but like i said, i am very new to all this and i cant make it work.

Fiddle is at http://jsfiddle.net/15kene5v/ and if anybody can help, that would be great.

Answer 1

Use slideUp and slideToggle instead of hide and toggle.

Updated Fiddle

$(document).ready(function() {
  $('.menu').click(function() {
    var $clicked = $(this)
    $('.menu').each(function() {
      var $menu = $(this);
      if (!$menu.is($clicked)) {
        // Use slideUp here
        $($menu.attr('data-item')).slideUp('slow');
      }
    });

    // Use sildeToggle here
    $($clicked.attr('data-item')).slideToggle('slow');
  });
});

nav ul {
  margin: 0;
  padding: 0;
  background-color: #6DB4F3;
  text-align: center;
}
nav ul li {
  display: inline-block;
  margin: 10px;
}
nav ul li a {
  color: white;
  text-decoration: none;
}
.drawer {
  height: 100px;
  background-color: darkorange;
  color: white;
  text-align: center;
  position: relative;
}
.drawer:after {
  content: 'close';
  left: 0;
  top: 0;
  position: absolute;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="drawer" id="link1" style="display: none">First link content</div>
<div class="drawer" id="link2" style="display: none">Second link content</div>
<div class="drawer" id="link3" style="display: none">Third link content</div>
<nav>
  <ul>
    <li><a href="#" class="menu" data-item="#link1">Link 1</a>

    </li>
    <li><a href="#" class="menu" data-item="#link2">Link 2</a>

    </li>
    <li><a href="#" class="menu" data-item="#link3">Link 3</a>

    </li>
    <li><a href="#">External link</a>

    </li>
  </ul>
</nav>
<div style="display:block">Content that gets pushed down</div>