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.

Read more here: Bootstrap accordion in WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *