Getting Bootstrap accordion working in WordPress loop with custom post type (collapsing issue)

First off I am well aware that there is a plugin but I am NOT talking about the BS Short code plugin. I am talking about the actual bootstrap accordion. So here is what I am trying to accomplish, I am pretty close I am trying to use custom post types and fields to generate an accordion of questions. So I have a custom post type of “Questions’ with a simple title field and a WISYWIG editor for the answer to the question.

So here is my code:

<?php get_header(); ?>

<?php

    $args = array(
        'post_type' => 'question'
    );
    $the_query = new WP_Query( $args );
?>

<div class="wrap">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <?php the_title(); ?>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <?php the_field('answer'); ?>
      </div>
    </div>
  </div>

<?php endwhile; else: ?>

    <p>Please fill out some questions.</p>

<?php endif; ?>
<?php wp_reset_postdata(); ?>

</div><!--end of the accordion wrap-->
</div><!-- wrapper-->

<?php get_footer(); ?>

The Problem:

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

The problem is in that piece of code because each accordion has a unique id and when I loop it through the custom loop it displays all my questions fine BUT they all start off not collapsed and open because they all have the same id of collapseOne

How can I generate a unique id for each time WordPress loops through the accordion. (if I said that rite)

See how the accordion loads “Open” because it does not have a unique href, aria-controls and id.

href="#collapseOne"

aria-controls="collapseOne"

id="collapseOne"

Never mind I got it. I used <?php the_ID(); ?> to set unique id’s but even so that was not the problem. Turns out the first accordion had a class of "in" so the real question was

How can I only give a class to the first post of a loop?

and I did that by using a simple counter. <?php $c = 0; ?> increment it at the end of the loop then give a conditional that echo’s "in" if c is = to 1.

Heres the code:

<?php get_header(); ?>

<?php

    $args = array(
        'post_type' => 'question',
        'order'     => 'ASC'
    );
    $the_query = new WP_Query( $args );
?>
<?php $c = 0; ?>

<div class="wrap">

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); $c++; ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-<?php the_ID(); ?>">
      <h4 class="panel-title">
        <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>
      </h4>
    </div>

    <div id="collapse-<?php the_ID(); ?>" class="panel-collapse collapse <?php if( $c == 1 ) echo 'in'; ?>" role="tabpanel" aria-labelledby="heading-<?php the_ID(); ?>">
      <div class="panel-body">
        <?php the_field('answer'); ?>
      </div>
    </div>
  </div>


<?php endwhile; else: ?>

    <p>Please fill out some questions.</p>

<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div><!--end of the accordion wrap-->


</div><!--wrapper-->



<?php get_footer(); ?>