So I'm developing a theme and would like to implement an accordion for some client reviews. I followed this handy guide (and updated it for Bootstrap 4) which gave me this code:
<?php
$args = array(
'post_type' => 'review'
);
$the_query = new WP_Query($args);
?>
<div class="row mb-5">
<div class="col-md-9">
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : ?>
<?php $the_query->the_post(); ?>
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="heading<?php the_ID() ?>">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php the_ID() ?>" aria-expanded="true" aria-controls="collapse<?php the_ID() ?>"><?php the_title(); ?></a>
</h5>
</div>
<?php rewind_posts(); ?>
<div id="collapse<?php the_ID() ?>" class="collapse <?php echo ($the_query->current_post == 0 ? 'show' : ''); ?>" role="tabpanel" aria-labelledby="heading<?php the_ID() ?>">
<div class="card-block">
<span><?php the_content(); ?></span>
</div>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div>
</div>
<?php wp_reset_query(); ?>
My issue is that the accordion function works, but only on the first click. All accordion tabs remain open after being clicked after that point, instead of closing when a new one is clicked. What should I do?
