WP: 7. Control Tab on frontend with ACF[Solved]

   

Today I ran into a problem, I needed to implement tabs on the front end with ACF dynamically and found this solution.

And nonetheless, It's better to fix the thing with some bunch of code rather than uploading one more bulky plugin on your website that will end up making your site heavy.

Just follow the steps below and avoid heading up into any malicious or bulky plugin for this particular problem from now on forever.

Step 1: Execute loop first for tab navigation

<?php $i=1; while(have_rows('data')) : the_row(); ?>

  <button class="nav-item nav-link <?php if($i==1){echo "active";}?>" data-bs-toggle="tab" data-bs-target="#tab<?php echo $i;$i++;?>">

<h3 class="s-floorplan__tabs__title"><?php the_sub_field('tab_title'); ?></h3>

<p class="s-floorplan__tabs__text"><?php the_sub_field('tab_sub_title'); ?></p>

  </button>

<?php endwhile;?>

Step 2: Execute second loop for tab content

<?php 

$i=1;

while(have_rows('data')) : the_row(); 

$tab_image = get_sub_field('tab_image');

?>

  <div id="tab<?php echo $i;?>" class="tab tab-pane <?php if($i==1){echo "active show";}$i++;?>fade show">

<img src="<?php echo $tab_image['url']; ?>" alt="" class="s-floorplan__img">

  </div>

<?php endwhile;?>

Now Cheers !😊