Bootstrap Accordion and WordPress

I guess lots of people facing this issue. Its about implementing bootstrap accordion into wordpress loop. Because bootstrap accordion have unique Ids for panels and content body etc, it makes problems making it in loop. Via google i found code that works and assign unique id for each new accordion but default states of all accordions is open. I want just first one to be open not all of them.

<?php
          $loop = new WP_Query( array( 'post_type' => 'careers', 'posts_per_page' => 35) ); ?>  

         <?php $c = 1; ?>

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

                      <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading-<?php the_ID(); ?>">
                          <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php the_ID(); ?>" aria-expanded="true" aria-controls="collapse-<?php the_ID(); ?>">
                              <?php the_title(''); ?> <span> <?php the_field('careers_date'); ?> </span>
                            </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 get_template_part( 'content', 'page' ); ?>

                          </div>
                        </div>
                      </div>

          <?php $c++; ?>
         <?php endwhile; ?>