tab content not working as expected

Question

in my code i want every tab-content should be hidden then when i click on the menu then the menu wise contents will open,I've done all these so far.now i want when i click the menu it should slideDown the content slowly and again if i click on that menu the content should be closed with slideUp .

    $(document).on('click','.nav-link.active', function(){
    var href = $(this).attr('href').substring(1);
    $(this).removeClass('active');
   // $('.tab-content').slideDown('slow');
    $('.tab-pane[id="'+ href +'"]').removeClass('active');  
    $('.tab-content').hide().slideDown(600);       
    });

I want when like this but not happening actually. DEMO

$(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).stop().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>

Answer 1

Hope this is what you are looking for:

$('.tab-content').hide();  

$(document).on('click','.nav-link:not(.active)', function(){
  $('.tab-content').slideDown("slow");       
});

$(document).on('click','.nav-link.active', function(){
  $('.tab-content').slideToggle("slow");       
});

.tab-pane{
  background-color:red;
  padding-top:50px;
  padding-bottom:50px;
}
.tab-content{
  background-color:#ccc;
  padding-top:10px;
  padding-bottom:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<ul class="nav" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane" id="home" role="tabpanel">Good</div>
  <div class="tab-pane" id="profile" role="tabpanel">Best</div>
  <div class="tab-pane" id="messages" role="tabpanel">Poor</div>
  <div class="tab-pane" id="settings" role="tabpanel">Ugly</div>
</div>

Answer 2

Here you go with a solution http://jsfiddle.net/otpq2c5j/38/

$(document).on('click','.nav-link', function(){
  $('.tab-pane').slideUp('fast');
  $($(this).attr('href')).slideDown('slow');
});

.tab-pane{
  background-color:red;
  padding-top:50px;
  padding-bottom:50px;
}
.tab-content{
  background-color:#ccc;
  padding-top:10px;
  padding-bottom:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="nav" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane" id="home" role="tabpanel">Good</div>
  <div class="tab-pane" id="profile" role="tabpanel">Best</div>
  <div class="tab-pane" id="messages" role="tabpanel">Poor</div>
  <div class="tab-pane" id="settings" role="tabpanel">Ugly</div>
</div>

Answer 3

Add active class to first tab-content div

<div class="tab-pane active" id="home" role="tabpanel">Good</div>

Update css like this

.tab-content{
  background-color:#ccc;
}
.tab-pane.active{
  display:block;
}

Update js file like this

 $(document).on('click','.nav-link', function(){
        var href = $(this).attr('href').substring(1);
        //$(this).removeClass('active');
       // $('.tab-content').slideDown('slow');
        $('.tab-pane[id="'+ href +'"]').slideToggle(600);       
        });

Answer 4

You can do it with simple CSS. Instead of the code $('.tab-content').hide().slideDown(600); use transition: height 1s; in your active class in css.

What this does is, smoothly transitions from the previous class to the active class. There are many customizations that you can do to the transition effect. Take a look at the transition attributes here for reference.