Hi all. I am hoping someone can assist with this lovely problem. I have an ACF for bootstrap 5 tabs that took me a while to get working but thanks to some help, I was finally able to resolve. Now I am on to the second hurdle, and that is loading some accordions into those tabs via acf. I can seem to get my counter variable to increment which is a problem as I need some sort of counter to populate the needed ids etc for the accordions to work. I am posting my code below in the hopes that someone can help. Feel free to grab the working code for the bootstrap 5 tabs 🙂
<?php if( have_rows('faq_tabs') ): $counter = 1 ?>
<div class="section faqs p-0 pb-5 pt-2">
<div class="<?php echo esc_attr( $container ); ?>">
<div class="row">
<ul class="nav nav-pills justify-content-center p-4" id="myTabs" role="tablist">
<?php while( have_rows('faq_tabs') ): the_row(); ?>
<?php $tabname = get_sub_field('faq_tab_name'); ?>
<li class="nav-item px-2 " role="presentation">
<button class="nav-link <?php if($counter == 1) echo 'active';?>"
id="<?php echo str_replace(' ', '', $tabname); ?>-tab" data-bs-toggle="tab"
data-bs-target="#<?php echo str_replace(' ', '', $tabname); ?>"
type="button" role="tab"
aria-controls="<?php echo str_replace(' ', '', $tabname); ?>"
aria-selected="true"><?php echo $counter ?><?php the_sub_field('faq_tab_name'); ?></button>
</li>
<?php $counter++ ?>
<?php endwhile; reset_rows(); ?>
</ul>
<div class="tab-content">
<?php $counter = 1 ?>
<?php while( have_rows('faq_tabs') ): the_row(); ?>
<?php $tabname = get_sub_field('faq_tab_name'); ?>
<div class="tab-pane <?php if($counter == 1) echo 'active';?>"
id="<?php echo str_replace(' ', '', $tabname); ?>" role="tabpanel"
aria-labelledby="<?php echo str_replace(' ', '', $tabname); ?>-tab">
<div class="row justify-content-center align-items-center">
<div class="col-md-6">
image <?php echo $counter; ?>
</div>
<div class="col-md-6">
<?php if( have_rows('faq_accordion') ): ?>
<div class="accordion accordion-flush" id="accordionFlushExample">
<?php while( have_rows('faq_accordion') ): the_row(); $accCount = 0 ?>
<?php $count = count(get_field('faq_accordion')); echo $accCount; ?>
<div class="accordion-item">
<p class="accordion-header" id="flush-heading<?php echo $accCount; ?>">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapse<?php echo $accCount; ?>"
aria-expanded="false" aria-controls="flush-collapse<?php echo $accCount; ?>">
<?php echo get_sub_field('question'); ?> $accCount: <?php echo $accCount; ?>
</button>
</p>
<div id="flush-collapse<?php echo $accCount; ?>" class="accordion-collapse collapse"
aria-labelledby="flush-heading<?php echo $accCount; ?>"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<?php echo get_sub_field('answer'); ?> $accCount: <?php echo $accCount; ?>
Counter: <?php echo $counter; ?>
</div>
</div>
</div>
<?php $accCount++; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php $counter++ ?>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
<?php endif; ?>
Sorry for the double post, but I solved it. I recently updated my accordion counter to use <?
<?php $count = count(get_field(‘faq_accordion’)); echo $accCount; ?> but frgot to remove my original counter variable declaration from in my while loop. :
php while( have_rows(‘faq_accordion’) ): the_row(); $accCount = 0 ?>
