Twitter Bootstrap tabs not hiding content
<p>I have a little problem with my code. The tabs load but when I  click on another inactive tab doesn't hide the content of the first tab and displays the content of both tabs. Is there anything I can do? Thank you very much!</p>

<pre><code>    &lt;ul style="list-style:none"class="available-tabs nav nav-tabs" id="tabs" data-tabs="tabs"&gt;
          &lt;li class="active"&gt; &lt;a data-toggle="tab" href="#featured-tab-body"&gt;FEATURED PROJECTS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a data-toggle="tab" href="#available-latest-tab"&gt;LATEST PROJECTS &lt;/a&gt; &lt;/li&gt;
 &lt;/ul&gt;
&lt;div class="available-content tab-content container"&gt;
  &lt;div id="available-featured-tab"&gt;
    &lt;div class="featured-list-wrapper"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;div class="featured-list-content"&gt;
            &lt;div class="row featured-tab-head" style="color:black;height:40px"&gt;
              &lt;div class="col-md-5 col-sm-5 col-xs-8"&gt;
                &lt;h5&gt; YAE&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2 col-sm-2 hidden-xs"&gt;
                &lt;h5&gt;NAH&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2 hidden-sm hidden-xs"&gt;
                &lt;h5&gt;HEY&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class="col-md-1 col-sm-2 hidden-xs"&gt;
                &lt;h5&gt;YOU&lt;/h5&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="featured-tab-body tab-pane fade in active"&gt;
              sup
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="available-latest-tab" class="tab-pane fade"&gt;
    hi
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>