Reply To: Nested Repeater Bootstrap Tabs

• John Huebner

• January 11, 2017 at 2:06 pm

I reorganized your code a bit so that I could better see what was going on, for me it makes it a little clearer. This is what I came up with. Hopefully you can see the changes I made to the logic.

<div>
  <!-- Check for parent repeater row -->
  <?php 
    if (have_rows('menu_sections')) {
      ?>
        <ul class="nav nav-tabs" role="tablist">
          <?php 
            $row = 1; // number rows 
            // Step 1: Loop through rows, first displaying tab titles
            while( have_rows('menu_sections') ) {
            the_row();
              ?>
                <li role="presentation" class="list-unstyled<?php 
                    if($row == 1) {echo 'active';}?>">
                  <a href="#<?php 
                      echo $row; ?>" role="tab" data-toggle="tab"><?php 
                      the_sub_field('section_title'); ?></a>
                </li>
              <?php 
              $row++;
            } // end while have rows
          ?>
        </ul>
      <?php 
      reset_rows();
      ?>
        <div class="tab-content">
          <?php 
            $row = 1; // number rows
            // Step 2: Loop through rows, now displaying tab contents
            while (have_rows('menu_sections')) {
              the_row();
              ?>
                <div class="tab-pane <?php 
                    if($row == 1) {echo 'active';}?>" id="<?php echo $row; ?>">
                  <?php 
                    while (have_rows('section_items')) {
                      the_row();
                      // Display each item as a list
                      ?>
                        <ul>
                          <li class="list-unstyled"><?php the_sub_field('dish_name'); ?></li>
                          <li class="list-unstyled"><?php the_sub_field('dish_description'); ?></li>
                          <li class="list-unstyled"><?php the_sub_field('dish_price'); ?></li>
                        </ul>
                      <?php 
                      $row++;
                    } // end while have rows section_items
                  ?>
                </div>
              <?php 
            } // end wile have rows menu_sections  
          ?>
        </div>
      <?php 
    } // end if have rows
  ?>
</div>