title: How to give the slide up /slide down effect to bootstrap tab-pane
body: <p>I have got the basic tab of bootstrap and i want when i change the tab menu the content (tab-pane) should animate like bootstrap collapse does( slide down/slide up)
  Is it possible ?</p>
  
  <pre><code>&lt;ul class="nav" id="myTab" role="tablist"&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home"&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"&gt;Profile&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages"&gt;Messages&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings"&gt;Settings&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane active" id="home" role="tabpanel"&gt;This Is good&lt;/div&gt;
    &lt;div class="tab-pane" id="profile" role="tabpanel"&gt;This is better&lt;/div&gt;
    &lt;div class="tab-pane" id="messages" role="tabpanel"&gt;Thhis is excellent &lt;/div&gt;
    &lt;div class="tab-pane" id="settings" role="tabpanel"&gt;This is poor&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm running out of idea so please help me i know it's a silly question.</p>
  
  <p>Here is the <a href="https://jsfiddle.net/hjuuf0f5/" rel="nofollow noreferrer">EXAMPLE</a></p>