bootstrap panels nicht zusammenklappbar

Question

Ich habe ein Bootstrap-Akkordeon-Panel, und die Panels kollabieren nicht wie sie sollten, wenn ich auf sie klicke, wenn sie bereits geöffnet sind. Ich kann nicht herausfinden warum. Ich hatte dies mit den hartcodierten Panels funktioniert, aber sobald ich wp_query zum Laden der Panels eingerichtet hatte, funktionierte alles außer den Panels.

die Funktion:

<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> 

und die verschachtelten Schleifen die Akkordeon-Panels zu erzeugen:

<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, ich habe folgendes hinzugefügt, aber es ist immer noch nicht funktioniert:

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

2nd edit: Ich glaube, das Problem ist, dass .Parent nicht das richtige Element finden, aber ich bin mir nicht sicher, wie um es richtig zu lenken.

<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, ich habe das gelöst. Ich hatte diese Seite ursprünglich als Teil einer Wordpress-Site erstellt und den Bootstrap-Code oben in der Vorlage eingefügt. Bei der Neuerstellung der gesamten Site habe ich ein neues Bootstrap-Include in die Header-Datei für die Site eingefügt. Ich habe das alte Include an der Spitze meines Templates gelassen, als ich an der Arbeit an dieser speziellen Seite anfing, und diese Redundanz des Codes verursachte irgendwie, dass der Kollaps falsch funktionierte. Ich weiß immer noch nicht, warum das der Fall war, aber jetzt funktioniert es richtig.

Ich weiß, dass ich nicht wirklich irgendwelche Antworten darauf erhalten habe, aber danke an alle, die zumindest geschaut haben.