title: How to slide toggle bootstrap nav tabs?
body: <p>I am using <code>bootstrap nav-tab</code> in my page to toggle data. Here I am trying to add some simple effects to my page.when I click the tab I need slide toggle the tab content from left corner to right/top to bottom.</p>
  
  <p>I tried this, but it's not working. What did I do wrong? or else is there any way in angularjs to do this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".tt").click(function() {
      $(".tab-content").slideDown("slow");
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tab-content div {
    width: 53%;
    height: 90px;
    background: red;
    padding: 20px;
    margin: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;h3&gt;Tabs&lt;/h3&gt;
    &lt;ul class="nav nav-tabs"&gt;
      &lt;li class="active tt"&gt;&lt;a data-target="#a" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class='tt'&gt;&lt;a data-target="#b" data-toggle="tab"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class='tt'&gt;&lt;a data-target="#c" data-toggle="tab"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane active" id="a"&gt;text1&lt;/div&gt;
      &lt;div class="tab-pane" id="b"&gt;text2&lt;/div&gt;
      &lt;div class="tab-pane" id="c"&gt;text3&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/qEjXj/3261/" rel="nofollow noreferrer">http://jsfiddle.net/qEjXj/3261/</a></p>