Toggle slide using Jquery

Question

I have 3 links with 3 contents associated with them, when I click on one of the links to div with the corresponding content is displayed.

Case another div that is not corresponding is already being displayed it is closed and the correct is opened, however the slideToggle of jqueryis not making a uniform effect, if a div "x" is open and I click to open the "y", instead of the slide always following from top to bottom it switches by doing the slide from bottom to top.

And if I click 2x on the same link a div opens and closes quickly even having the toggle defined.

$('a').on('click', function(event) {
  event.preventDefault();
  var content = $(this).data('section');
  var contents = $('.container .section');
  
  $contents.each(function(index, el) {
    if ($(el).is(':visible') && $(el).data('content') !== content) {
      $(el).slideToggle('slow');
    }
  });
  
  $('[data-content="'+content+'"]').slideToggle('slow');
})

.container .section {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="" data-section="1">Section 1</a></li>
  <li><a href="" data-section="2">Section 2</a></li>
  <li><a href="" data-section="3">Section 3</a></li>
</ul>

<div class="container">
  <div class="section" data-content="1">
    Section 1
  </div>
  <div class="section" data-content="2">
    Section 2
  </div>
  <div class="section" data-content="3">
    Section 3
  </div>
</div>

If you prefer see also in pen code