Bootstrap multiple tab on same page and show only one tab

Question

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?

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

This is what I've tried so far:

$(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();
    });
})

Answer 1

Additional javascript isn't needed here. You can simply use the Bootstrap default code to make this happen.

Just make sure that all of your identifiers for each tab are unique and you can set it up like the following pen:

http://codepen.io/mutualdesigns/pen/pbGjbX

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#1" aria-controls="1" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#2" aria-controls="2" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#3" aria-controls="3" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#4" aria-controls="4" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a href="#5" aria-controls="5" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#6" aria-controls="6" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#7" aria-controls="7" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#8" aria-controls="8" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="1">1</div>
    <div role="tabpanel" class="tab-pane" id="2">2</div>
    <div role="tabpanel" class="tab-pane" id="3">3</div>
    <div role="tabpanel" class="tab-pane" id="4">4</div>
    <div role="tabpanel" class="tab-pane" id="5">5</div>
    <div role="tabpanel" class="tab-pane" id="6">6</div>
    <div role="tabpanel" class="tab-pane" id="7">7</div>
    <div role="tabpanel" class="tab-pane" id="8">8</div>
  </div>

</div>