I have two instances of Bootstrap Tabs on one page (using the understrap theme and a child theme). I’ve updated the two tab groups to have different IDs but for some reason (haha) the second instance of the Bootstrap Tabs, the first tab’s content never goes away. This is because the active/show classes never get removed when the other tabs are clicked.

On the second instance of tabbed content, I can click on the other tabs and it loads the content under the first tab’s content. The first tab’s content (of second instance) never goes away (the active class stays put).

One other thing I noticed, If I tell it to set the active on $i or $row == 2 it will display that content only on page load but then when I go to click on the first tab, no tab-panel content will display. The active never gets placed on that first tab-panel.

First Tabbed Content:

<div class="tabbed-col">
<script>
    $(document).ready(function(){
       $("#ai-tabs a").click(function(e){
         e.preventDefault();
         $(this).tab("show");
       });
    });
</script>

<?php if( have_rows('how_to_prepare_listing') ):
$i = 1; // Set the increment variable
echo '<ul class="nav nav-tabs" id="ai-tabs" role="tablist">';
                                                        
// loop through the rows of data for the tab header
while ( have_rows('how_to_prepare_listing') ) : the_row();
$header = get_sub_field('tab_title');
$content = get_sub_field('tab_information');
?>
    <li class="nav-item">
      <a class="nav-link <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title($header); ?>-tab" data-toggle="tab" href="#<?php echo sanitize_title($header); ?>" role="tab" aria-controls="<?php echo sanitize_title($header); ?>" aria-selected="true"><?php echo $header; ?></a>
    </li>            
    <?php   $i++; // Increment the increment variable

endwhile; //End the loop 
                                                        
echo '</ul>';
echo '<div class="tab-content" id="aiTabContent">';
$i = 1; // Set the increment variable
                                                        
// loop through the rows of data for the tab content
while ( have_rows('how_to_prepare_listing') ) : the_row();
$header = get_sub_field('tab_title');
$content = get_sub_field('tab_information');
?>              
<div class="tab-pane fade show <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title($header); ?>" role="tabpanel" aria-labelledby="<?php echo sanitize_title($header); ?>-tab"><?php echo $content; ?></div>
                                                        
<?php   $i++; // Increment the increment variable           
endwhile; //End the loop                                    
echo '</div>';
                                                        
else :
// no rows found
endif; ?>
</div><!--.tabbed-col-->

Second Tabbed Content on page:

<div class="tabbed-col">
  <script>
    $(document).ready(function(){
        $("#ai-tabs-second a").click(function(e){
            e.preventDefault();
            $(this).tab("show");
        });
        
    });
  </script>
  <?php if( have_rows('second_how_to_prepare_listing') ):
      $row = 1; // Set the increment variable
      echo '<ul class="nav nav-tabs" id="ai-tabs-second" role="tablist">';
      
      // loop through the rows of data for the tab header
          while ( have_rows('second_how_to_prepare_listing') ) : the_row();
              $secondheader = get_sub_field('second_tab_title');
              $secondcontent = get_sub_field('second_tab_information');
      ?>
      <li class="nav-item">
            <a class="nav-link <?php if($row == 1) echo 'active';?>" id="<?php echo sanitize_title($secondheader); ?>-tab" data-toggle="tab" href="#<?php echo sanitize_title($secondheader); ?>" role="tab" aria-controls="<?php echo sanitize_title($secondheader); ?>" aria-selected="true">
              <?php echo $secondheader;?>
            </a>
      </li>            
      <?php   $row++; // Increment the increment variable

      endwhile; //End the loop 
      
      echo '</ul>';

      echo '<div class="tab-content" id="aiTabContentSecond">';
      $row = 1; // Set the increment variable
      
      // loop through the rows of data for the tab content
      while ( have_rows('second_how_to_prepare_listing') ) : the_row();
        $secondheader = get_sub_field('second_tab_title');
        $secondcontent = get_sub_field('second_tab_information');
      ?>                
        <div class="tab-pane fade show <?php if($row == 1) echo 'active';?>" id="<?php echo sanitize_title($secondheader); ?>" role="tabpanel" aria-labelledby="<?php echo sanitize_title($secondheader); ?>-tab"><?php echo $secondcontent;?></div>
      
      <?php   $row++; // Increment the increment variable           
      endwhile; //End the loop                                  
      echo '</div>';
    else :
        // no rows found
    endif; ?>

</div><!--.tabbed-col-->