CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Merik
Merik

Reputation: 2817

Nested tabs in bootstrap

I have nested tabs in Bootstrap, and here is the code: http://jsfiddle.net/RLdYC/

$("ul.nav-tabs a").click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="tabbable boxed parentTabs">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#set1">Tab 1</a>
        </li>
        <li><a href="#set2">Tab 2</a>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade active in" id="set1">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub11">Tab 1.1</a>
                    </li>
                    <li><a href="#sub12">Tab 1.2</a>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="sub11">
                        <p>Tab 1.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub12">
                        <p>Tab 1.2</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="set2">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub21">Tab 2.1</a>
                    </li>
                    <li><a href="#sub22">Tab 2.2</a>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="sub21">
                        <p>Tab 2.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub22">
                        <p>Tab 2.2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The problem is, as soon as you click on a different tab on the top row, the actual content of the nested tab below will become hidden. I need the content of the first subtab to be shown.

I tried to trigger the click() function on the first subtab, but it didn't help. Can you please write the code that I need to fix this?

Upvotes: 30

Views: 72383

Answers (3)

Guillaume Graignic
Guillaume Graignic

Reputation: 21

I wanted to get nested (two levels) responsive tabs with Bootstrap 4 recently for my website. Please find below, what I think is a clean solution to manage that without extra JavaScript:

https://codepen.io/GMaup/pen/eYgJvKd

  
  <div class="card">
    <div class="card-header">
      
      <div class="d-flex">
        <div class="title pt-3 pb-4">
          <h3>Bootstrap 4 - Responsive Nested Tabs without JS (two levels tabs</h3>
        </div>
      </div>
    
      <!-- START TABS DIV -->
      <div class="tabbable-responsive">
        <div class="tabbable">
          <ul class="nav nav-pills nav-justified" id="linxea-avenir" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="eleve-tab" data-toggle="tab" href="#eleve" role="tab" aria-controls="first" aria-selected="true">Tab 1 with some text</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="moyen-tab" data-toggle="tab" href="#moyen" role="tab" aria-controls="second" aria-selected="false">Tab 2 with some text</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="faible-tab" data-toggle="tab" href="#faible" role="tab" aria-controls="second" aria-selected="false">Tab 3 with some text</a>
            </li>
          </ul>
        </div>
      </div>
    
      <div class="tab-content" style="margin-top:2px">
        <div class="tab-pane fade show active" id="eleve" role="tabpanel" aria-labelledby="eleve-tab">
          <!-- START TABS DIV -->
          <div class="tabbable-responsive">
            <div class="tabbable">
              <ul class="nav nav-pills nav-justified" id="eleve-nav" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="eleve-eco-tab" data-toggle="tab" href="#eleve-eco" role="tab" aria-controls="first" aria-selected="true">Tab 1.1 with some text</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="eleve-standard-tab" data-toggle="tab" href="#eleve-standard" role="tab" aria-controls="second" aria-selected="false">Tab 1.2 with some text</a>
                </li>
              </ul>
            </div>
          </div>

          <div class="tab-content">
            <div class="tab-pane fade show active" id="eleve-eco" role="tabpanel" aria-labelledby="eleve-eco-tab">

<!-- ****************************************************** -->
<!-- START SECTION 1 -->

<p>exemple 1</p>
<p>Resize you screen to see how does it fit</p>

<!-- ****************************************************** -->
<!-- END SECTION 1 -->

            </div>
            <div class="tab-pane fade" id="eleve-standard" role="tabpanel" aria-labelledby="eleve-standard-tab">

<!-- ****************************************************** -->
<!-- START SECTION 2 -->

<p>exemple 2</p>

<!-- ****************************************************** -->
<!-- END SECTION 2 -->

            </div>
          </div>    
          
        </div>
        <div class="tab-pane fade" id="moyen" role="tabpanel" aria-labelledby="moyen-tab">
            
        <div class="tab-content" style="margin-top:2px">
        <div class="tab-pane fade show active" id="moyen" role="tabpanel" aria-labelledby="moyen-tab">
          <!-- START TABS DIV -->
          <div class="tabbable-responsive">
            <div class="tabbable">
              <ul class="nav nav-pills nav-justified" id="moyen-nav" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="moyen-eco-tab" data-toggle="tab" href="#moyen-eco" role="tab" aria-controls="first" aria-selected="true">Tab 2.1 with some text</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="moyen-standard-tab" data-toggle="tab" href="#moyen-standard" role="tab" aria-controls="second" aria-selected="false">Tab 2.2 with some text</a>
                </li>
              </ul>
            </div>
          </div>

          <div class="tab-content">
            <div class="tab-pane fade show active" id="moyen-eco" role="tabpanel" aria-labelledby="moyen-eco-tab">

<!-- ****************************************************** -->
<!-- START SECTION 3 -->

<p>exemple 3</p>

<!-- ****************************************************** -->
<!-- END SECTION 3 -->


            </div>
            <div class="tab-pane fade" id="moyen-standard" role="tabpanel" aria-labelledby="moyen-standard-tab">

<!-- ****************************************************** -->
<!-- START SECTION 4 -->

<p>exemple 4</p>

<!-- ****************************************************** -->
<!-- END SECTION 4 -->
                </div>
              </div>   
            </div>
          </div>  
          
        </div>
        
        <div class="tab-pane fade" id="faible" role="tabpanel" aria-labelledby="faible-tab">
            
        <div class="tab-content" style="margin-top:2px">
        <div class="tab-pane fade show active" id="faible" role="tabpanel" aria-labelledby="faible-tab">
          <!-- START TABS DIV -->
          <div class="tabbable-responsive">
            <div class="tabbable">
              <ul class="nav nav-pills nav-justified" id="faible-nav" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="faible-eco-tab" data-toggle="tab" href="#faible-eco" role="tab" aria-controls="first" aria-selected="true">Tab 3.1 with some text</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="faible-standard-tab" data-toggle="tab" href="#faible-standard" role="tab" aria-controls="second" aria-selected="false">Tab 3.2 with some text</a>
                </li>
              </ul>
            </div>
          </div>

          <div class="tab-content">
            <div class="tab-pane fade show active" id="faible-eco" role="tabpanel" aria-labelledby="faible-eco-tab">
        
<!-- ****************************************************** -->
<!-- START SECTION 5 -->

<p>exemple 5</p>

<!-- ****************************************************** -->
<!-- END SECTION 5 -->

            </div>
            <div class="tab-pane fade" id="faible-standard" role="tabpanel" aria-labelledby="faible-standard-tab">
                
<!-- ****************************************************** -->
<!-- START SECTION 6 -->

<p>exemple 6</p>

<!-- ****************************************************** -->
<!-- END SECTION 6 -->
        
                </div>
              </div>   
            </div>
          </div>  
          
        </div>
        
      </div>      
      
    </div>
  </div>


.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #40bf4f !important; 
}

.tabbable .nav-pills {
  margin-left: 0px;
}

Upvotes: 2

Mwangi Thiga
Mwangi Thiga

Reputation: 1369

Try using this:

<div class="row">
        <div class="col-md-12">
         <!-- Custom Tabs -->
          <div class="nav-tabs-custom">
          <ul class="nav nav-tabs">
        <li class="active"><a href="#set1">New</a>
        </li>
        <li><a href="#set2">Confirmed</a>
        </li>
    </ul>
    <div class="tab-content">

        <div class="tab-pane fade active in" id="set1">

            <div class="tabbable">
                 <ul class="nav nav-tabs">
              <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Web Design and Development</a></li>
              <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">Domain Registration</a></li>
              <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">Cloud Computing Services</a></li>
              <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">Android application Development</a></li>
              <li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false">Web Hosting</a></li>
              <li class=""><a href="#tab_6" data-toggle="tab" aria-expanded="false">SEO and Online Marketing</a></li>
              <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="tab_1">
                <b>Web Deign and development hires:</b>




                <table class="table" id="webdesignTable">                   
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>



              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_2">
              <b>Domain Registration</b>


              <table class="table" id="domainregistrationTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>



              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_3">
               <b>Cloud Computing</b>


              <table class="table" id="cloudcomputingTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_4">
               <b>Android application Development</b>


              <table class="table" id="androidappTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_5">
               <b>Web Hosting</b>


              <table class="table" id="webhostingTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_6">
               <b>SEO and Online Marketing</b>


              <table class="table" id="seoTable">                   
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
            </div>

        </div>

        <div class="tab-pane fade" id="set2">
            <div class="tabbable">
                   <ul class="nav nav-tabs">
              <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Web Design and Development</a></li>
              <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">Domain Registration</a></li>
              <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">Cloud Computing Services</a></li>
              <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">Android application Development</a></li>
              <li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false">Web Hosting</a></li>
              <li class=""><a href="#tab_6" data-toggle="tab" aria-expanded="false">SEO and Online Marketing</a></li>
              <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="tab_1">
                <b>Web Deign and development hires:</b>




                <table class="table" id="webdesignTable">                   
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>



              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_2">
              <b>Domain Registration</b>


              <table class="table" id="domainregistrationTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>



              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_3">
               <b>Cloud Computing</b>


              <table class="table" id="cloudcomputingTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_4">
               <b>Android application Development</b>


              <table class="table" id="androidappTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_5">
               <b>Web Hosting</b>


              <table class="table" id="webhostingTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_6">
               <b>SEO and Online Marketing</b>


              <table class="table" id="seoTable">                   
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
            </div>
        </div>

    </div>
          </div>
        </div>
        </div>

Upvotes: 3

Michał Rybak
Michał Rybak

Reputation: 8706

You have more than one element with id myTabContent.

HTML ids should be unique across the page.

Simply remove those ids or use classes instead (working demo here).

$("ul.nav-tabs a").click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="tabbable boxed parentTabs">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#set1">Tab 1</a>
        </li>
        <li><a href="#set2">Tab 2</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade active in" id="set1">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub11">Tab 1.1</a>
                    </li>
                    <li><a href="#sub12">Tab 1.2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="sub11">
                        <p>Tab 1.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub12">
                        <p>Tab 1.2</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="set2">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub21">Tab 2.1</a>
                    </li>
                    <li><a href="#sub22">Tab 2.2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="sub21">
                        <p>Tab 2.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub22">
                        <p>Tab 2.2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 45

Related Questions