jmccole83
10/25/2018 - 9:14 AM

Bootstrap 4 Accordion | Laravel & ACF

Example of a Bootstrap 4 Accordion, using Laravel blade template and ACF Pro repeating fields and sub-fields.

@if ( get_field('faq') )
  @while ( has_sub_field('faq') )
    <p class="title">@php the_sub_field('faq_title') @endphp</p>
    @php $accordionName = get_sub_field('faq_title'); $accordionName = strtolower($accordionName); $accordionName = str_replace(' ', '-', $accordionName); $accordionName = str_replace('&', '', $accordionName) @endphp
      @if ( get_sub_field('faq_repeater') ) @php $i = 0 @endphp
      <div class="accordion" id="accordion-@php echo $accordionName @endphp">
        @while ( has_sub_field('faq_repeater') )
        <div class="card">
          <div class="card-header" id="heading-@php echo $i @endphp">
          <h5 class="mb-0">
            <button class="btn btn-link @if($i > 0) collapsed @endif" type="button" data-toggle="collapse" data-target="#collapse-@php echo $accordionName . '-'  . $i @endphp" aria-expanded="@if($i > 0) false @else true @endif" aria-controls="collapse-@php echo $accordionName . '-'  . $i @endphp">
              @php the_sub_field('question') @endphp
            </button>
          </h5>
        </div>
        <div id="collapse-@php echo $accordionName . '-'  . $i @endphp" class="collapse" aria-labelledby="heading-@php echo $accordionName . '-'  . $i @endphp" data-parent="#accordion-@php echo $accordionName @endphp">
          <div class="card-body">
            @php the_sub_field('answer') @endphp
          </div>
        </div>
      </div>
      @php $i++ @endphp @endwhile
    </div>
    @endif
  @endwhile
@endif