Bootstrap tab content slideDown/slideUp not working

Question

i'm using bootstrap alpha tab , actually my code is big so can't really paste here all those but i'm giving few example code. I want the tab-content on click slideUp /SlideDown .But it's not happening it just doing normal tab option,I want slideDown the tab-content on click the tab menu and slideUp when click that menu again.

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

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

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></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> 

Please help me.

DEMO

Answer 1

Running your demo and looking at the Console's logs.

Uncaught TypeError: $(...).slideDown is not a function

at HTMLAnchorElement. ((index):76)

at HTMLDocument.dispatch (VM106 jquery-3.1.1.slim.min.js:3)

at HTMLDocument.q.handle (VM106 jquery-3.1.1.slim.min.js:3)

Since there's an error with the SlideDown function, it will has no effect. It seems that the jQuery library file you're including doesn't have that function.

Step 1: jquery.slim

You're including the slim version of jQuery. According to the source:

Along with the regular version of jQuery that includes the ajax and effects modules, we're releasing a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code.

So, for instance, slideDown isn't available in this version. You should use the regular version (minified if you wish, but not the slim one).

https://code.jquery.com/

Answer 2

Please check your included jQuery version, slideDown() is undefined. I would try to include another, for example from google library: jQuery

And then:slideDown() can´t work with visible elements. So you have to change your code like that:

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

... or display: none with css to hide your element before make it visible with the slideDown function.