monsty monsty -4 years ago 97
PHP Question

Bootstrap accordion in Wordpress

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 Source

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 -->
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download