Skip to main content

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 !😊
Labels:

Comments

Post a Comment

Popular posts from this blog

C: 10. Array

 An array is defined as the collection of similar type of data items stored at contiguous memory locations. For example, if we want to store the marks of a student in 6 subjects, then we don't need to define different variables for the marks in the different subject. Instead of that, we can define an array which can store the marks in each subject at the contiguous memory locations. An array index starts with 0. Syntax:- data_type array_name[array_size];   int marks[5];     Example:- #include<stdio.h>   int main(){       int i=0;     int marks[5];//declaration of array        marks[0]=80;//initialization of array     marks[1]=60;     marks[2]=70;     marks[3]=85;     marks[4]=75;     //traversal of array     for(i=0;i<5;i++){       printf("%d \n",marks[i]);   ...
Post a Comment
Read more

JS: Cheatsheet

   Datatypes Difference Between Var, Let and Const Functions and its types Asynchronous operations in JS
3 comments
Read more

WP: 8. Dynamically show post taxonomies and their data in tab format [Solved]

    Today I ran into a problem, I need to dynamically show post taxonomies and their data in tab format 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: Get the taxonomies terms first <?php     $terms = get_terms( array(       'taxonomy' => 'off_plan_categories',       'hide_empty' => true,     ) );     // echo '<pre>';     // print_r($terms);     // die; ?> Step 2:  Execute loop first for tab navigation <nav id="offPlanPropertyTabs" class="offplan-property-type-tabs nav nav-tabs"> <?php foreach($terms as $key => $term): ?>   <button class="nav-item nav-link <?php...
1 comment
Read more