Reply To: How-to: Multiple Bootstrap Accordions

• spinline

• August 25, 2015 at 5:35 am

I figured out a solution based on Kalen Johnson’s repo.

<?php if( have_rows('content') ): ?>

<?php $j=1; while ( have_rows('content') ) : the_row(); ?>

<?php	if( get_row_layout() == 'accordion' ): ?>

<?php	if (get_sub_field('heading')) { ?>
<h2 class="title text-center"><?php the_sub_field('heading'); ?></h2>
<?php } ?>

<?php if( have_rows('sections') ): ?>

<div class="panel-group" id="accordion-<?php echo $j; ?>" role="tablist" aria-multiselectable="true">

<?php	$i=1; while ( have_rows('sections') ) : the_row(); ?>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-<?php echo $i; ?>">
<h2 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-<?php echo $j; ?>" href="#collapse-<?php echo $j; ?>-<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne">
<?php the_sub_field('question'); ?>
</a>
</h2>
</div>

<div id="collapse-<?php echo $j; ?>-<?php echo $i; ?>" class="panel-collapse collapse <?php if ($i==1) { echo 'in'; } ?>" role="tabpanel" aria-labelledby="heading-<?php echo $i; ?>">
<div class="panel-body">
<?php the_sub_field('answer'); ?>
</div>
</div>
    
</div>
<?php $i++; endwhile; ?>
</div>

<?php endif; ?>
<?php endif; ?>

<?php $j++; endwhile; ?>

<?php else : endif; ?>