Support

Account

Home Forums Add-ons Repeater Field ACF Repeater Accordion with Bootstrap 5

Helping

ACF Repeater Accordion with Bootstrap 5

  • im attempting to use an ACF repeater field to build an FAQ accordion using Bootstrap 5 with a simple question and answer field. i’m getting the results to print out but the accordion expander opens all fields on click and not just the targeted field on click. How can i adjust the IDs to only open the field that is clicked?

    CURRENT CODE

    <?php elseif ( get_row_layout() == 'module__faq' ) : ?>
    
        <!-- Module: FAQ
        ================================================== -->
        <div class="section-interior-content bg-white py-5">
    
            <div class="container text-center text-md-start">
    
                <div class="row">
    
                    <div class="col-12 col-lg-4 text-center text-md-start order-lg-first">
    
                        <h2 class="black">
                            Lorem ipsum 
                        </h2>
    
                    </div>  
                    
                    <div class="col-12 col-lg-8 order-first">
    
                        <?php if ( have_rows( 'faq' ) ) : ?>
                        
                            <div class="accordion accordion-flush" id="faqlist">
    
                                <?php $i=1; while ( have_rows( 'faq' ) ) : the_row(); ?>
                                
                                    <div class="accordion-item">
                                        
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-1">
                                                <?php the_sub_field( 'question' ); ?>
                                            </button>
                                        </h2>
                                    
                                        <div id="faq-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                            
                                            <div class="accordion-body px-4">
                                                <?php the_sub_field( 'answer' ); ?>
                                            </div>
                                        </div>
    
                                    </div>
    
                                <?php endwhile; ?>
    
                            </div>
    
                        <?php else : ?>
                            <?php // no rows found ?>
                        <?php endif; ?>
    
                    </div>
    
                </div>
    
            </div>
    
        </div>
        <!-- END Module: FAQ
        ================================================== -->
    
    <?php endif; ?>
  • I solved this the quickest way by adding a unique id field for each FAQ – based off this post: Issue with ACF repeater accordeon loop

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.