Repeater Field: Bootstrap Accordion Previous Selection Not Collapsing

• toad78

• May 25, 2016 at 5:50 am

On this page I’m using Bootstrap code to create an Accordion. Unfortunately, once a Question/Answer is opened and another is clicked, the first one before it will not collapse. Therefore, I’m missing the ability to force previously viewed Q&A’s to collapse.

My code:

                    <?php if ( have_rows('faqs') ): ?>
						
 						<?php while ( have_rows('faqs') ) : the_row();
							$id = get_sub_field('id');
							$question = get_sub_field('question');
							$answer = get_sub_field('answer');
						?>

                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                              <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#<?php echo $id; ?>" aria-expanded="true" aria-controls="<?php echo $id; ?>">
                                  <?php echo $question; ?>
                                </a>
                              </h4>
                            </div>
                            <div id="<?php echo $id; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $id; ?>">
                              <div class="panel-body">
                                <?php echo $answer; ?>
                              </div>
                            </div>
                          </div>
                        </div>                          
                        <?php endwhile; ?><!--endwhile-->
                                                                                
					<?php endif; ?>

• James

• May 25, 2016 at 3:18 pm

Hi @toad78

I’m afraid this is a bootstrap issue, not ACF. For something like that, kindly ask to bootstrap community instead. I’m sorry for the inconvenience.

Thanks 🙂

• toad78

• May 28, 2016 at 4:43 am

Thank you.

• krapan88

• June 14, 2016 at 1:10 am

Perhaps it is too late , but still write his solution

<?php if (have_rows('repeater_field')) { ?>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <?php
        $faq_a = 0; //add counter for targeting first acccordion element
        while (have_rows('repeater_field')) {
            the_row();
            ?>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading_<?php echo $faq_a ?>">
                    <h4 class="panel-title">
                        <a class="<?php if ($faq_a != 0) echo 'collapsed' ?>" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_<?php echo $faq_a ?>" aria-expanded="<?php
                        if ($faq_a == 0) {
                            echo 'true';
                        } else {
                            echo 'false';
                        };
                        ?>" aria-controls="collapse_<?php echo $faq_a ?>">
                               <?php the_sub_field('repeater_subfield_1'); ?>
                        </a>
                    </h4>
                </div>
                <div id="collapse_<?php echo $faq_a ?>" class="panel-collapse collapse <?php if ($faq_a == 0) echo 'in' ?>" role="tabpanel" aria-labelledby="heading_<?php echo $faq_a ?>">
                    <div class="panel-body italic">
                        <?php the_sub_field('repeater_subfield_2'); ?>
                    </div>
                </div>
            </div>

            <?php
            $faq_a++;
        }
        ?>
    </div>
<?php } ?>