Bootstrap accordion in Wordpress - php

Question

I'm trying to get Bootstrap's accordion to work in Wordpress, but I'm not sure what else I have to add in the loop. At the moment, its expanding the first panel only no matter which one I click, and not displaying any content.
<div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true">
<?php
$args = array(
'post_type' => 'faq_question',
'category_name' => 'order',
'posts_per_page' => -1
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="<?php the_ID(); ?>">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><?php the_title();?></a>
</h4>
</div><!-- end panel heading -->
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="<?php the_ID(); ?>">
<div class="panel-body">
<p><?php the_content(); ?></p>
</div><!-- end panel body -->
</div><!-- end panel collapse -->
</div><!-- end panel default -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- end panel group -->
Appreciate any help, thanks.

Answer 1

Code for Bootstrap 4 with area Closed
<!-- Accordion Collapse Bootstrap 4 -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<?php
$args = array(
'post_type' => 'question',
'posts_per_page' => -1
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="card">
<div class="card-header" role="tab" id="<?php the_ID(); ?>">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php the_ID(); ?>" aria-expanded="false" aria-controls="collapseOne">
<?php the_Title(); ?>
</a>
</h5>
</div>
<div id="collapse<?php the_ID(); ?>" class="collapse" role="tabpanel" aria-labelledby="heading<?php the_ID(); ?>">
<div class="card-block">
<?php the_Content(); ?>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
<!-- Accordion Collapse Bootstrap 4 -->

Answer 2

I suspect it's because you are ending up with multiple divs with the same id, #collapse1, so Bootstrap doesn't know which one you want to collapse. Try altering your code so that each collapsible panel has a unique id, like this;
(I've stripped out some of the extra attributes so I could more easily see what's going on)
<div class="panel-group" id="accordian">
<?php
$args = array(
'post_type' => 'faq_question',
'category_name' => 'order',
'posts_per_page' => -1
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordian" href="#collapse<?php the_ID(); ?>" ><?php the_Title(); ?></a>
</h4>
</div><!-- end panel heading -->
<div id="collapse<?php the_ID ?>" class="panel-collapse collapse">
<div class="panel-body">
<p><?php the_Content(); ?></p>
</div><!-- end panel body -->
</div><!-- end panel collapse -->
</div><!-- end panel default -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- end panel group -->

Answer 3

<?php
$args = array(
'post_type' => 'Help',
'posts_per_page' => -1
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="<?php the_ID(); ?>">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian" href="#collapse<?php the_ID(); ?>" aria-expanded="false" aria-controls="collapseOne"><?php the_title();?></a>
</h4>
</div><!-- end panel heading -->
<div id="collapse<?php the_ID(); ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="<?php the_ID(); ?>">
<div class="panel-body">
<p><?php the_content(); ?></p>
</div><!-- end panel body -->
</div><!-- end panel collapse -->
</div><!-- end panel default -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- end panel group -->