Nested Tabs with Repeater - Advance Custom Fields Wordpress

Question

I want to make some tabs with Wordpress Using the Advance Custom Field Plug-in with the Repeater Add-On.

This is my actual code:

<?php

if( have_rows('menu_sections') ): ?>
    <ul class="nav nav-tabs" id="" role="tablist">
        <?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
            <?php
            $string = sanitize_title( get_sub_field('section_title') );
            ?>
            <li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?>  >
                <a  role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
            </li>
        <?php $i++; endwhile; ?>
    </ul>

    <div class="tab-content">
        <?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
            <?php
            $string = sanitize_title( get_sub_field('section_title') );
            ?>
            <div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">
                <?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
                } // end while have rows section_items
                ?>
            </div>
        <?php $i++; endwhile; ?>
    </div>
<?php endif; ?>

This Actual code displays this:

Now if i select another tab it won't change the card info as you can see in the next image:

Im using a Bootstrap Tabs with a CDN

This is what the Gooogle console display:

So I tried many different ways but no success at all.

I do know how to make them without a nested repeater, and with this case I don't know why it dosen't work. I read some other posts but no having much success either. So I think that if it dosen't show is something with css??

I will appreaciate the help. Regards!

Answer 1

Try changing

<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?>  >
  <a  role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
</li>

to

<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?>  >
  <a  role="tab" data-toggle="tab" href="#tab-<?php echo $i; ?>"><?php the_sub_field('section_title'); ?></a>
</li>

and

<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">

to

<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="tab-<?php echo $i; ?>">

I hope it will solve the issue. You are assigning a section title as id to tab-pane, which might contain space as well. It's always recommended to use id without spaces.