Support

Account

Home Forums Add-ons Repeater Field Multiple Bootstrap accordions with repeater field Reply To: Multiple Bootstrap accordions with repeater field

  • @xuzo – It is save to use this, even if there is only one accordion. You will anyway need a uniqe ID for the rows of the accordion.

    In this example I use get_row_index() to give the ID:

    <?php if ( have_rows('columns') ) : ?>
        <div class="row">
            <?php while ( have_rows('columns') ) : the_row(); ?>
                <?php if ( get_row_layout() == 'columns_row_row_accordion'): ?>
    
                    <section class="column column_accordion __ col-12">  
    
                        <?php $Acc = get_row_index(); ?>
                        <?php if( have_rows('accordion_zeile') ) : ?>
                            <div id="accordion_<?php echo $Acc; ?>">
                                <?php while ( have_rows('accordion_zeile') ) : the_row(); ?>
                            
                                    <div class="card">
                                        <div class="card-header" id="heading_<?php echo get_row_index(); ?>_<?php echo $Acc; ?>">
                                            <h4 class="mb-0">
                                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse_<?php echo get_row_index(); ?>_<?php echo $Acc; ?>" aria-expanded="true" aria-controls="collapse_<?php echo get_row_index(); ?>_<?php echo $Acc; ?>">
                                                    <?php the_sub_field("accordion_titel"); ?>
                                                </button>
                                            </h4>
                                        </div>
    
                                        <div id="collapse_<?php echo get_row_index(); ?>_<?php echo $Acc; ?>" class="collapse" aria-labelledby="heading_<?php echo get_row_index(); ?>_<?php echo $Acc; ?>" data-parent="#accordion_<?php echo $Acc; ?>">
                                            <div class="card-body">
                                                <?php the_sub_field("accordion_text"); ?>
                                            </div>
                                        </div>
                                    </div>
    
                                <?php endwhile; ?>
                            </div>
                        <?php endif; ?>
                        
                    </section>
    
                <?php endif; ?>
            <?php endwhile; ?>
        </div>
    <?php endif; ?>

    And in this example I use “uniqid” to give an ID:
    https://codepen.io/herrfischer/pen/yqrZzm

    Feel free to ask if you need more help.