WordPress Loop with Custom Post Type for Bootstrap Accordion

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?

Read more here: WordPress Loop with Custom Post Type for Bootstrap Accordion

Leave a Reply

Your email address will not be published. Required fields are marked *