We will create a FAQ section with Bootstrap accordion with the help of the ACF Repeater field. Let take a look at our ACF repeater field on the ACF field group.
If you want jump into final code Click here
Field Creation for ACF repeater Bootstrap accordion
As we create a repeater field with 2 sub field text and description. Now take a look basic code of ACF Repeater and Bootstrap. You can also check out ACF Repeter official documentation here
<?php if ( have_rows('field_name') ) : ?>
<?php while( have_rows('field_name') ) : the_row(); ?>
<?php the_sub_field('sub_field_name'); ?>
<?php endwhile; ?>
<?php endif; ?>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Details here
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Details here
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Details here
</div>
</div>
</div>
</div>
So if you see on bootstrap code, you will take a there is an ID on each item of FAQ we need and some chnage on first item that not similar to other for our ACF repeater Bootstrap accordion creation. Also for repeater field we will use one block of faq and loop it as many time we need.
If you don’t to use bootstrap then you can check this Simple jQuery Accordion Collapse code and use with ACF
Before go on deep let clean the bootstrap code so it will easy for us to implement with ACF. You can see official documentation of Bootstrap accordion here
<div class="faq_wrapper" id="accordion">
<!-- faq single block start -->
<div class="faq_items">
<div class="faq_heading" id="heading1">
<h4 class="faq_title">
<a data-toggle="collapse" data-target="#collapse1" aria-controls="collapse1" aria-expanded="true"
data-parent="#accordion" href="#collapse1">
Title
</a>
</h4>
</div>
<div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
<div class="faq_body">
Description
</div>
</div>
</div>
<!-- faq sigle block end -->
</div>
Now we have Bootstrap accordion code with the first item. I change some class name so it doesn’t get bootstrap default CSS. If we put that code in the ACF repeater field it will look like this. we are mixing ACF repeater Bootstrap accordion code together
<?php if ( have_rows('faq') ) : ?>
<div class="faq_wrapper" id="accordion">
<!-- faq single block start -->
<?php while( have_rows('faq') ) : the_row(); ?>
<div class="faq_items">
<div class="faq_heading" id="heading1">
<h4 class="faq_title">
<a data-toggle="collapse" data-target="#collapse1" aria-controls="collapse1" aria-expanded="true"
data-parent="#accordion" href="#collapse1">
<?php echo get_sub_field('title'); ?>
</a>
</h4>
</div>
<div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
<div class="faq_body">
<?php echo get_sub_field('description'); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<!-- faq sigle block end -->
</div>
<?php endif; ?>
Now the final touch for creating a ACF repeater Bootstrap accordion in WordPress
As we said earlier, we need to put something different for the first item. So let count our faq with $item variable and give some condition for the first item attribute of the FAQ. The final code will be like this.
<?php if ( have_rows('faq') ) : ?>
<div class="faq_wrapper" id="accordion">
<!-- faq single block start -->
<?php $item=1;?>
<?php while( have_rows('faq') ) : the_row(); ?>
<?php if($item == 1){
$aria = 'aria-expanded="true"';
$collapseClass = ' show';
}else{
$aria = 'aria-expanded="false"';
$collapseClass = '';
}
?>
<div class="faq_items">
<div class="faq_heading" id="heading<?php echo $item;?>">
<h4 class="faq_title">
<a data-toggle="collapse" data-target="#collapse<?php echo $item;?>"
aria-controls="collapse<?php echo $item;?>" data-parent="#accordion" <?php echo $aria;?>
href="#collapse<?php echo $item;?>"><?php echo get_sub_field('title'); ?></a>
</h4>
</div>
<div id="collapse<?php echo $item;?>" class="collapse<?php echo $collapseClass;?>"
aria-labelledby="heading<?php echo $item;?>" data-parent="#accordion">
<div class="faq_body">
<?php echo get_sub_field('description'); ?>
</div>
</div>
</div>
<?php $item++;?>
<?php endwhile; ?>
<!-- faq sigle block end -->
</div>
<?php endif; ?>
you can directly use this final code and change ACF value. But Before we finish let understand how it working.
We call a variable $item and assign a value 1 and echo that value at the end of all IDs. Also, we increment that value at $item++. We put that before the end of the loop so value changes every time loop work. Finally we will get IDs like collapse1, collapse2, collapse3 so on…
Forgive some change at first time we put a condition if($item == 1) and assign 2 value on 2 variable. As we want 1st item of FAQ open so we need to put aria-expanded=”true” and show on collapse body.
Hope this tutorial helps and save your lot of time for ACF repeater Bootstrap accordion in WordPress. If you have any question please ask on comment. 🙂
Tanvir Hossain Tofan 
Justin 
