Support

Account

Home Forums Add-ons Flexible Content Field How-to: Multiple Bootstrap Accordions

Solved

How-to: Multiple Bootstrap Accordions

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

  • 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; ?>
  • This saved me hours! thx!

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

You must be logged in to reply to this topic.