Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Show or hide specific bootstrap tab with jQuery

The .nav-tabs class is used to generate a tabbed interface with nav-tabs as tabs in bootstrap.

Tab Nav

<ul class="nav nav-tabs">
          <li class="nav-item">
          <a class="nav-link active" href="#userList">User list </a>
          <li class="nav-item">
          <a class="nav-link" href="#details">Details</a>
          <li class="nav-item">
          <a class="nav-link" href="#rewards">Rewards</a>

Tab content (Tab pane)

<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="userList" role="tabpanel" aria-labelledby="user-tab">some actual list data here..</div>
<div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">some actual details data here…</div>
<div class="tab-pane fade" id="rewards" role="tabpanel" aria-labelledby="rewards-tab">Rewards data here...</div>


jQuery Code to show specific tab

Show first tab

$(".nav-tabs a:first-child").tab("show");

Show 2nd tab

$(".nav-tabs a:nth-child(2)").tab("show"); 

Show last tab

$(".nav-tabs a:last").tab("show"); 


To hide tab simply remove active class from nav-item


Invalid entry,please enter valid data.