23 Apr 2019

Dynamic Bootstrap 4 accordion using Wordpress advanced custom fields

<?php
$counter = 0;
$Accordion_heading_1 = get_field('Accordion_heading_1');
?>

<section id="accordion-1" class="accordion">
<div class="container">
<?php if ($Accordion_heading_1) { ?>
<h2><?php echo $Accordion_heading_1; ?></h2>
<?php } ?>
<div class="accordion" id="accordionexample">

<?php

// check if the repeater field has rows of data
if (have_rows('tab_1')):

// loop through the rows of data
while (have_rows('tab_1')) : the_row(); ?>

<?php
$counter++;
?>

<div class="card">
<div class="card-header" id="heading<?php echo '-' . $counter; ?>">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse"
data-target="#collapse<?php echo '-' . $counter; ?>" aria-expanded="true"
aria-controls="collapse<?php echo '-' . $counter; ?>">
<?php the_sub_field('question'); ?>
</button>
</h2>
</div>

<div id="collapse<?php echo '-' . $counter; ?>" class="collapse"
aria-labelledby="heading<?php echo '-' . $counter; ?>" data-parent="#accordionexample">
<div class="card-body">
<?php the_sub_field('answer'); ?>
</div>
</div>
</div>

<?php endwhile;

else :

// no rows found

endif;

?>

</div>
</div>
</section>