Title: Bootstrap nested tabs inside loop
Last modified: August 30, 2016

---

# Bootstrap nested tabs inside loop

 *  [jelly_bean](https://wordpress.org/support/users/jelly_bean/)
 * (@jelly_bean)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/bootstrap-nested-tabs-inside-loop/)
 * I want to use the post titles for the outer tabs (I have this working fine) and
   the inner tabs should be the content of that post, but I can’t click through 
   the inner tabs. Can anyone tell me what I’m doing wrong.
 *     ```
       <div class="tab-content" id="outer">
   
           <!-- Outer Tabs -->
           <?php
           $counter = 0;
           $loop = new WP_Query( array( 'post_type' => 'house_type', 'posts_per_page' => -1 ) );
           while ( $loop->have_posts() ) : $loop->the_post();
               $counter++;
           ?>
   
         <div class="tab-pane <?=($counter == 1) ? 'active': ''?>" id="<?php print strtolower(get_the_title()); ?>">
   
            <div id="spec-tabs" class="white clearfix">
   
             <!-- inner tabs -->
             <ul class="nav nav-tabs dark-grey" role="tablist"  id="inner">
   
                 <li role="presentation" class="active"><a href="#general" aria-controls="home" role="tab" data-toggle="tab">Overview</a></li>
                 <li role="presentation"><a href="#kitchen" aria-controls="profile" role="tab" data-toggle="tab">Floor Plans</a></li>
                 <li role="presentation"><a href="#bathroom" aria-controls="messages" role="tab" data-toggle="tab">Specification</a></li>
   
               </ul>
   
               <!-- Inner Tab panes -->
               <div class="tab-content clearfix" id="inner">
               <div role="tabpanel" class="tab-pane fade in active clearfix" id="general">
                   <p>General Text</p>
               </div>
   
               <div role="tabpanel" class="tab-pane fade in  clearfix" id="floorplan">
                   <p>Floorplan Text</p>
               </div>
   
              <div role="tabpanel" class="tab-pane fade in  clearfix" id="specs">
                   <p>Specification Text</p>
              </div>
              </div>
           </div>
         </div>             
   
       <?php endwhile;
       wp_reset_postdata();?>
       </div>
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [jelly_bean](https://wordpress.org/support/users/jelly_bean/)
 * (@jelly_bean)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/bootstrap-nested-tabs-inside-loop/#post-6666174)
 * I can’t edit this. I have noticed that I used the original names from the tab
   file I copied and the aria-controls should not be “profile” or “kitchen”. I’ve
   update that, but it’s still not working.
 * Well, it does work on the first default tab, but not when I select a different
   outer tab.
 *  Thread Starter [jelly_bean](https://wordpress.org/support/users/jelly_bean/)
 * (@jelly_bean)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/bootstrap-nested-tabs-inside-loop/#post-6666183)
 * Using the title as a unique reference for the tab names solves the problem.
 * i.e. This tab title:
 * `<a href="#floorplan-<?php print strtolower(get_the_title()); ?>`
 * Relates to this tab id:
 * `<div role="tabpanel" class="tab-pane fade in clearfix" id="floorplan-<?php print
   strtolower(get_the_title()); ?>">`

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Bootstrap nested tabs inside loop’ is closed to new replies.

## Tags

 * [loop](https://wordpress.org/support/topic-tag/loop/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 1 participant
 * Last reply from: [jelly_bean](https://wordpress.org/support/users/jelly_bean/)
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/bootstrap-nested-tabs-inside-loop/#post-6666183)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics