Question

I have a bunch of thumbnails that are loaded through several Advanced Custom Fields repeater fields. When clicking the thumbnail I want the respective text to each thumbnail to appear in the Bootstrap tab's content div. The text is in the same repeater as the image, but a seperate field. But I don't know how to access the respective repeater fields text with the click. The number of thumbnails is infinite.

The list of thumbnails use this code:

<ul>
         <?php foreach (get_field('repeater-field', 39) as $row) :?>

             <li><a href="#profile" data-toggle="tab"> <img class="img-responsive img-rounded img-ref" src="<?php print $row['image'] ?>"/> </a>    </li>             
         <?php endforeach; ?>
         </ul>

And this is what I have so far for the tab content but it will only show the first repeater field and not the text for every respective thumbnail:

<div class="tab-content">
  <div class="tab-pane active" id="home"></div>
  <div class="tab-pane" id="profile">
  <?php

  $rows = get_field('repeater-field', 39);
  echo $rows[0]['text'];
  ?>


  </div>

</div>
Was it helpful?

Solution

Managed to solve it myself kinda. But the Bootstrap fade effects disappears for some reason…

Used this for the thumbnails:

         <ul class="tabs">


        <?php 

        $i = 1;
        while( have_rows('my_field', 39) ): the_row(); 

            // vars
            $image = get_sub_field('thumb');



            ?>

            <li class="tab-list">

                <a href="#<?php echo $i; ?>" data-toggle="tab">

                    <img class="img-responsive img-rounded img-ref" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />


                    </a>



            </li>

        <?php
        $i++;
        endwhile;
        ?>


        </ul>

       <?php endif; ?>

And this for the tabs:

    <div class="tab-content">
    <div class="tab-pane fade in " id="home"></div>

    <?php 

    $i = 1;
    while( have_rows('my_field', 39) ): the_row(); 

        // vars
        $text = get_sub_field('my_text');



        ?>


        <div class="tab-pane fade" id="<?php echo $i; ?>">



                <?php echo $text; ?>






        </div>

    <?php
    $i++;
    endwhile;
    ?>


    </div>

<?php endif; ?>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top