Bootstrap multiple tab on same page and show only one tab
<p>I have a multiple Bootstrap tabs on the same page. Everything works fine when I click on one tab (it shows its content). But I want to hide other tabs when one tab is active. Is there any way to do this?</p>

<pre><code>&lt;div class="pane-content-inner"&gt;
    &lt;div id="guides-tabs"&gt;
        &lt;ul class="nav nav-tabs tabs-group top"&gt;
            &lt;li class="col-md-3 study-inn" tabindex="0" class="tab tab-1 "&gt;
                &lt;a data-toggle="tab" data-target="#1" class="box box-1 jquery-once-6-processed"&gt;&lt;span tabindex="0" class="text"&gt;Harvard Medical School Overview&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="col-md-3 study-inn" tabindex="1" class="tab tab-2"&gt;
                &lt;a data-toggle="tab" data-target="#2" class="box box-2 jquery-once-6-processed"&gt;&lt;span tabindex="1" class="text"&gt;Medical Program and Specialities&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="col-md-3 study-inn" tabindex="2" class="tab tab-3"&gt;
                &lt;a data-toggle="tab" data-target="#3" class="box box-3 jquery-once-6-processed"&gt;&lt;span tabindex="2" class="text"&gt;Medical &amp; Clinical Research&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="col-md-3 study-inn" tabindex="4" class="tab tab-4"&gt;
                &lt;a data-toggle="tab" data-target="#4" class="box box-4 jquery-once-6-processed"&gt;&lt;span tabindex="2" class="text"&gt;Admissions&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="tab-content"&gt;
            &lt;div id="1" class="tab-pane "&gt;
                &lt;h2&gt;Universities in Norway&lt;/h2&gt;
                &lt;p&gt;Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some &lt;/p&gt;
                &lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="2" class="tab-pane "&gt;
                &lt;h2&gt;Universities in Norway&lt;/h2&gt;
                &lt;p&gt;Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some &lt;/p&gt;
                &lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="3" class="tab-pane "&gt;
                &lt;h2&gt;Universities in Norway&lt;/h2&gt;
                &lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="4" class="tab-pane "&gt;
                &lt;h2&gt;Universities in Norway&lt;/h2&gt;
                &lt;/p&gt;
            &lt;/div&gt;
            &lt;/p&gt;
        &lt;/div&gt;
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="pane-content-inner"&gt;
    &lt;div id="guides-tabs"&gt;
        &lt;ul class="nav nav-tabs tabs-group top"&gt;
            &lt;li class="col-md-3 study-inn" tabindex="5" class="tab tab-5 "&gt;
                &lt;a data-toggle="tab" data-target="#5" class="box box-5 jquery-once-6-processed"&gt;&lt;span tabindex="0" class="text"&gt;Residancy&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="col-md-3 study-inn" tabindex="6" class="tab tab-6"&gt;
                &lt;a data-toggle="tab" data-target="#6" class="box box-6 jquery-once-6-processed"&gt;&lt;span tabindex="1" class="text"&gt;Costs&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="col-md-3 study-inn" tabindex="7" class="tab tab-7"&gt;
                &lt;a data-toggle="tab" data-target="#7" class="box box-7 jquery-once-6-processed"&gt;&lt;span tabindex="2" class="text"&gt;Medicine Undergraduate National Fees&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="col-md-3 study-inn" tabindex="3" class="tab tab-8"&gt;
                &lt;a data-toggle="tab" data-target="#8" class="box box-8 jquery-once-6-processed"&gt;&lt;span tabindex="2" class="text"&gt;Medicine Undergraduate International Fees&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="tab-content"&gt;
            &lt;div id="5" class="tab-pane "&gt;
                &lt;h2&gt;Universities in Norway&lt;/h2&gt;
                &lt;p&gt;Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some &lt;/p&gt;
                &lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="6" class="tab-pane "&gt;
                &lt;h2&gt;Universities in Norway&lt;/h2&gt;
                &lt;p&gt;Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some &lt;/p&gt;
                &lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="7" class="tab-pane "&gt;
                &lt;h2&gt;Universities in Norway&lt;/h2&gt;
                &lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="8 " class="tab-pane "&gt;
                &lt;h2&gt;Universities in Norway&lt;/h2&gt;
                &lt;/p&gt;
            &lt;/div&gt;
            &lt;/p&gt;
        &lt;/div&gt;
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This is what I've tried so far:</p>

<pre><code>$(document).ready(function() {
    $('.nav li a').click(function(e) {
        $('.nav li').removeClass('active');
        var $parent = $(this).parent();
        console.log($parent);
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
        }
        e.preventDefault();
    });
})
</code></pre>