Reply To: Multiple Bootstrap accordions with repeater field

• Trishah

• August 22, 2018 at 7:23 am

This is my solution for anyone else wanting to use Bootstrap 3 Accordion in WordPress:

ACF Field = “faqs”
Repeater Sub Fields = “question”, “answer”

<?php
$counter = 1;
if( have_rows('faqs') ):

 echo "<div class='panel-group' id='accordion'>";
    while ( have_rows('faqs') ) : the_row();

$count = $counter++;

    echo "<div class='panel panel-default'>
    <div class='panel-heading'>
      <h4 class='panel-title'>
        <a data-toggle='collapse' data-parent='#accordion' href='#collapse" . $count . "'>";
        the_sub_field('question');
    echo "</a>
      </h4>
    </div>
    <div id='collapse" . $count . "' class='panel-collapse collapse'>
      <div class='panel-body'>";
      the_sub_field('answer');
    echo "</div>
    </div>
  </div>";

    endwhile;

    echo "</div>";
else :
endif;
?>

Note: I’ve removed the “in” from the answer class so all panels will be closed on page load. If you want all to be open then use this instead:

class=’panel-collapse collapse in’