CODEWITHSUNDEEP
phpwordpresstwitter-bootstrap
monsty
monsty

Reputation: 87

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.

Upvotes: 2

Views: 4313

Answers (3)

olybop
olybop

Reputation: 31

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

Upvotes: 3

Alpesh Navadiya
Alpesh Navadiya

Reputation: 23

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

Upvotes: 0

Joe Miller
Joe Miller

Reputation: 3893

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

Upvotes: 1

Related Questions