Sliding Animation Stutters in Accordion

I have an accordion menu with tabs. When you click on the tabs, information is displayed below one of them, by sliding up and down smoothly.

The problem is that there is a stutter in the animation, during slideUp and slideDown. I also tried animate and adjusting some of the css, but I can't figure it out.

If it helps, here's the fiddle.

HTML:

 <div class="project-container">
 
 
 These don't slide well:
     <ul class="project-nav">
  <li class="project-tab" id="project-tab-1"><a id="project-tab-link" href="#" class="active">Tab 1</a>
    <section class="is-open">
    <p id="current-project-title">TITLE</p>
    <p>TEXT HERE</p>
    </section>
  </li>
  <li class="project-tab" id="project-tab-2"><a id="project-tab-link" href="#">Tab 2</a>
    <section>
INFO HERE<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </section>
  </li>
        </ul>
        </div>
        
<br>
But this slides VERY well:
<br>
             <button class="toggle-info">toggle slider<i class="glyphicon glyphicon-chevron-down"></i></button>
             <section class="info-container">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </section>
         

Javascript:

$(document).ready(function() {
    var Tabs = {
  
  el: {
    nav: $(".project-nav"),
    tabs: $(".project-nav > .project-tab > a"),
    panels: $(".project-nav > .project-tab > section"),
  },

  init: function() {
    Tabs.bindUIActions();
  },
  bindUIActions: function() {
    Tabs.el.nav
      .on(
        'click', 
        '.project-tab > a:not(.active)', 
        function(event) {
          Tabs.deactivateAll();
          Tabs.activateTab(event);
          event.preventDefault();
        }
      );
  },
  
  deactivateAll: function() {
    Tabs.el.tabs.removeClass("active");
    Tabs.el.panels.removeClass("is-open").slideUp('slow');
  },
  activateTab: function(event) {
    $(event.target)
      .addClass("active")
      .next()
      .addClass("is-open").slideDown('slow');
  }
};

Tabs.init();   




////// Slide Doesn't Work For Tabs
$('.project-tab section.is-open').slideDown('slow');



////// Slide Works For Toggle Button
$('.toggle-info').click(function() {
    $('.info-container').slideToggle('slow');
    $("i", this).toggleClass("glyphicon glyphicon-chevron-right glyphicon glyphicon-chevron-down");
});
});
  

This your problem

.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

You add transition css to slide element, it make slide effect not working correctly, you must remove it

you can try this jsfiddle