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

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 if($key==0): ?> active <?php en
1 comment
Read more

JS: Cheatsheet

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

C++: 9. File Handling

Files are used to store data in a storage device permanently. File handling provides a mechanism to store the output of a program in a file and perform various operations on it. Example of opening/creating a file    #include<iostream> #include<fstream> using namespace std; int main() { fstream new_file; new_file.open("new_file",ios::out); if(!new_file) { cout<<"File creation failed"; } else { cout<<"New file created"; new_file.close(); // Step 4: Closing file } return 0; } Writing to a File #include <iostream> #include <fstream> using namespace std; int main() { fstream new_file; new_file.open("new_file_write.txt",ios::out); if(!new_file) { cout<<"File creation failed"; } else { cout<<"New file created"; new_file<<"Learning File handling"; //Writing to file new_file.close();
Post a Comment
Read more