How-to: Multiple Bootstrap Accordions

• spinline

• August 22, 2015 at 2:18 am

I’ve created a Flexible Layout because I need multiple Bootstrap accordions (known as the Collapse component.) I’m able to apply counters to each of the sub fields and pass unique IDs to each accordion and data-parent.

It’s still not working.

For example, clicking the second heading element inside the 2nd accordion opens the second panel inside the 1st accordion.

My current syntax:

<?php if( have_rows('content') ): ?>
<?php $j=1; while ( have_rows('content') ) : the_row(); ?>
<?php if( get_row_layout() == 'accordion' ): ?>
<?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 $i; ?>" aria-expanded="true" aria-controls="collapseOne">
<?php the_sub_field('question'); ?>
</a>
</h2>
</div>

<div id="collapse-<?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; ?>

• spinline

• August 22, 2015 at 3:52 am

Looking further, here’s my problem:

Currently, it outputs like this:

Accordion 1
-Collapse 1
-Collapse 2
-Collapse 3

Accordion 2
-Collapse 1
-Collapse 2
-Collapse 3

It needs to output like this:

Accordion 1
-Collapse 1
-Collapse 2
-Collapse 3

Accordion 2
-Collapse 4
-Collapse 5
-Collapse 6

How can this be accomplished?

• 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; ?>

• danielgc

• February 21, 2017 at 5:20 pm

This saved me hours! thx!