Skip to content

Instantly share code, notes, and snippets.

@utopianfool
Created September 22, 2020 05:34
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save utopianfool/d533af3ee7d93bfda004682d2e9cbf75 to your computer and use it in GitHub Desktop.
Accordions in 2 column WordPress Bootstrap ACF Example
<section class="content-section">
<div class="container">
<div class="row justify-content-center py-3">
<div class="col-12 col-md-6 mb-3 pb-3">
<?php the_field('left_column_content'); ?>
<div class="accordion" id="fact-accordion">
<?php if( have_rows('accordion') ): ?>
<?php $count = 1; ?>
<?php while ( have_rows('accordion') ) : the_row(); ?>
<?php
$title = get_sub_field('title');
$content = get_sub_field('content');
?>
<div class="card">
<div class="card-header" id="heading-<?php echo $count; ?>">
<h2 class="mb-0">
<button class="accordion-button text-left" type="button" data-toggle="collapse" data-target="#collapse<?php echo $count; ?>" aria-expanded="true" aria-controls="collapse<?php echo $count; ?>">
<i class="fas fa-plus"></i>
<?php echo $title; ?>
</button>
</h2>
</div>
<div id="collapse<?php echo $count; ?>" class="collapse" aria-labelledby="heading-<?php echo $count; ?>" data-parent="#fact-accordion">
<div class="card-body">
<?php echo $content; ?>
</div>
</div>
</div>
<?php $count ++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<div class="col-12 col-md-6 mb-3 pb-3">
<?php the_field('right_column_content'); ?>
</div>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment