bootstrap panels not collapsing

Question

I've got a bootstrap accordion panel, and the panels aren't collapsing like they should when I click on them if they're already open. I can't figure out why. I had this working with the panels hard coded, but once I set up wp_query to load the panels, everything worked except the panels closing.

the function:

<script>
$(function () {
    $('#accordion').on('shown.bs.collapse', function (e) {
        var offset = $(this).find('.collapse.in').prev('.panel-heading');
        if(offset) {
            $('html,body').animate({
                scrollTop: $(offset).offset().top -50
            }, 500); 
        }
    }); 
});

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

</script>

and the nested loops to generate the accordion panels:

<div class="home-contents">
  <div class="container">
        <div class="row">   
        <?php while ( have_posts() ) : the_post(); ?>
            <h1 class="faqheading"><?php the_title(); ?></h1>
           <!--  <div class="col-sm-9" style="float: none; margin: auto;"><?php the_content(); ?></div> -->
        <?php endwhile; ?>
            <div class="clear"></div>
        </div> <!-- row -->
    </div> <!-- container -->

    <div class="blog-page">
          <div class="container">
            <div class="row">
              <div class="col-sm-12 ">
                <div class="container">
                  <div class="panel-group" id="accordion">

                    <?php
                    /*
                     * Loop through Categories and Display Posts within
                     */
                    $post_type = 'faq';
                    // Get all the taxonomies for this post type
                    $taxonomies = get_object_taxonomies( array( 'post_type' => $post_type ) ); /* gets taxonomy from posts */
                    foreach( $taxonomies as $taxonomy ) :
                      // Gets every "category" (term) in this taxonomy to get the respective posts
                      $terms = get_terms( $taxonomy );
                      foreach( $terms as $term ) : ?>

                        <div class="groupheading col-sm-3"><h5 style=" color: #3fa9f5; font-size: 24px; font-weight: 300;"><?php echo $term->name; ?></h5></div>

                            <?php
                            $args = array(
                              'post_type' => $post_type,
                              'posts_per_page' => -1,  //show all posts

                              'tax_query' => array(
                                array(
                                  'taxonomy' => $taxonomy,
                                  'field' => 'slug',
                                  'terms' => $term->slug,
                                  'orderby' => 'collapse id',
                                  'order' => 'desc'
                                )
                              ),
                              'order' => 'DESC'
                            );
                            ?>

                        <?php           
                        $posts = new WP_Query($args);
                        if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post(); ?>

                          <div class="panel panel-default col-sm-9">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#<?php echo 'collapse'.get_the_id();?>"><?php $value = get_field( "faq_heading"); echo $value; ?></a>
                              </h4>
                            </div>
                            <div id="<?php echo 'collapse'.get_the_id();?>" class="panel-collapse collapse">
                              <div class="panel-body col-sm-9">
                                <p><?php $value = get_field( "faq_text", false, false); echo $value; ?></p>
                              </div>
                            </div>
                          </div> <!-- .panel -->
                        <?php endwhile;?>

                    <div class="panel panel-default col-sm-9 mobilehide" style="height: 45px;"></div>
                    <div class="groupheading col-sm-3 mobilehide" style="height: 45px;"></div>

                        <?php
                         endif; ?>

                      <?php endforeach;
                    endforeach; ?>
                    </div> <!-- .panel-group -->
                  </div><!-- end col-sm-12 -->
                </div> <!-- end row -->
              </div><!-- end container -->
            </div><!-- end blog-page -->
          </div> <!-- .container -->

Edit: Ok, I've added the following but it's still not working:

<script>
$(document).ready(function(){
    $("a.cf").click(function(){
        $(this).parentsUntil(".panel-default").find(.children(".panel-collapse")).removeClass("in");
    });f
});
</script>

2nd edit: I feel like the issue is that .parent isn't finding the right element, but I'm not sure how to direct it correctly.

<script>
$(document).ready(function(){
    $("a.cf").click(function(){
        $(this).addClass("collapsed");
        $(this).parent().find(".panel-collapse .collapse").removeClass(".panel-collapse .collapse").addClass(".panel-collapse .collapse .in");
        $(this).find().parent('.collapse.in').removeClass(".panel-collapse.collapse").addClass(".panel-collapse.collapse.in");;
    });
});
</script> 

Answer 1

Ok, I've solved this. I had originally built this page as part of a wordpress site, and I had included the bootstrap code at the top of the template. In the process of rebuilding the whole site, I put a new bootstrap include in the header file for the site. I left the old include at the top of my template when I got around to working on this particular page, and this redundancy of code was, somehow, causing the collapse to function incorrectly. I still don't know/understand why this was the case, but I've got it working correctly now.

I realize I didn't actually get any responses to this, but thank you to everyone who at least looked.