Easy ACF repeater Bootstrap accordion in WordPress

FAQ collapse design with ACF repeater Bootstrap accordion

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

ACF repeater Bootstrap accordion
ACF Repeater Field

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

ACF Repeater Code
<?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; ?>
Bootstrap Collapse
<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

Simplified version of bootstrap collapse
<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

Collapse with ACF repeater

<?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.

Final code of this tutorial
<?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. 🙂

Previous Code

Cookie Popup with jQuery

Browser cookies popup accept, store cookies in bro ...

Next Code

Remove Website field from WordPress comment & Change cookies remember text

Remove Website field from WordPress comment & Chan ...

0 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

18 + one =

Advanced Custom Fields code snippet

Advance custom field Link Field, Flexible content ...

ACF

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

skype

Need Coding Help?

Connect Skype
top