J'essaie de faire fonctionner l'accordéon de Bootstrap dans Wordpress, mais je ne suis pas sûr de ce que je dois ajouter d'autre dans la boucle. Pour le moment, il ne développe que le premier panneau, quel que soit celui sur lequel je clique, et n'affiche aucun contenu.

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

Appréciez toute aide, merci.

1
monsty 20 avril 2017 à 05:59

3 réponses

Meilleure réponse

Je soupçonne que c'est parce que vous vous retrouvez avec plusieurs div avec le même identifiant, #collapse1, donc Bootstrap ne sait pas laquelle vous voulez réduire. Essayez de modifier votre code afin que chaque panneau réductible ait un identifiant unique, comme ceci; (J'ai supprimé certains des attributs supplémentaires pour que je puisse voir plus facilement ce qui se passe)

<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 -->
1
Joe Miller 20 avril 2017 à 04:22

Code pour Bootstrap 4 avec zone fermée

<!-- 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 -->
2
David Gaborit 6 déc. 2017 à 11:45
        <?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 -->
0
Alpesh Navadiya 19 mai 2017 à 06:35