Slide-down tabs not working as expected

Question

I have made a custom based tabs using jQuery. The rule is that once you click a tab it will slide down the content with fadeIn effect. If you click another tab then it will not slideUp, rather it will show the content from tab 2 with fadeIn effect. If you click tab 2 again (which is already opened ) then the tab container will slide up.

It works for the first time but if you click the same tab again (after sliding up) then it takes some time to slide down which is not smooth as well.

What am I doing wrong?

  $(document).ready(function() {

    $('.tabs .col-3 a').click(function(e) { // Or bind to any other event you like, or call manually

      e.preventDefault();
      var hrefid = $(this).attr("href");
      var tabid = ($(this).attr("href")).replace('#', ''); // remove #         

      var getContent = $(hrefid).html();

      $('#maintabcontent').hide().html(getContent).fadeIn(1400);


      $('span.plus').text("+");
      var $t = $('.tab-container');

      if ($(this).parent().hasClass('active')) {
        $(this).find('span').text("+");
        $t.slideUp(function() {
          $('#maintabcontent').html('');
        });
        $(this).parent().removeClass('active');
      } else {

        $(this).find('span').text("-");
        $t.slideDown(600, function() {

        });
        if ($t.is(':visible')) {
          $('.col-3').removeClass('active');
          $(this).parent().addClass('active');
        }
      }

    });

  });

.container {
  margin: 0 auto;
  max-width: 1280px;
  overflow: hidden;
  position: relative;
}
.full-width {
  background: #dfdedb none repeat scroll 0 0;
  width: 100%;
}
.main-container {
  margin: 0 auto;
  max-width: 1220px;
}
.padding-top-bottom-small {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
.text-center {
  text-align: center;
}
.col-3 {
  display: inline-block;
  max-width: 403px;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  width: 32.5%;
}
.tabs .col-3 {
  border-right: 2px solid #ffffff;
  cursor: pointer;
}
.tab-container {
  background: #505050 none repeat scroll 0 0;
  display: none;
  position: relative;
}
.main-container {
  margin: 0 auto;
  max-width: 1220px;
}
.padding-top-bottom-big {
  padding-bottom: 2rem;
  padding-top: 2rem;
}
.tab-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-width container tabs">
  <div class="main-container">
    <div class="col-3 first text-center padding-top-bottom-small"> <a href="#tab-1"><h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3></a>

    </div>
    <div class="col-3 second text-center padding-top-bottom-small"> <a href="#tab-2"><h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3></a>

    </div>
    <div class="col-3 text-center padding-top-bottom-small"> <a href="#tab-3"><h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3></a>

    </div>
  </div>
</div>
<div class="tab-container">
  <div class="main-container padding-top-bottom-big" id="maintabcontent"></div>
</div>
<div id="tab-1" class="tab-content">Tab Content 1</div>
<div id="tab-2" class="tab-content">Tab Content 2</div>
<div id="tab-3" class="tab-content">Tab Content 3</div>

View on JSFiddle

Answer 1

Add stop() before fadeIn():

$('#maintabcontent').hide().html(getContent).stop().fadeIn(1400);

That will stop any running animations and prevent the jerkiness you're experiencing.

Updated Fiddle