자료 Wordpress의 부트 스트랩 아코디언

Question

WordPress에서 Bootstrap의 아코디언을 사용하려고하는데, 루프에 추가해야 할 부분이 무엇인지 모르겠습니다. 현재로서는 어느 패널을 클릭했는지에 관계없이 첫 번째 패널을 확장하고 아무 내용도 표시하지 않습니다.

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

감사합니다. 감사합니다.

Answer 1

동일한 ID (#collapse1)를 가진 여러 div로 끝나는 것 같기 때문에 Bootstrap은 붕괴하려는 항목을 알지 못합니다. 각 접을 수있는 패널에 다음과 같이 고유 한 ID가 있도록 코드를 변경하십시오. 는

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

이

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

Answer 3

코드 영역에 부트 스트랩 4 휴일 (그래서 좀 더 쉽게 무슨 일이 일어나고 있는지 볼 수있는 여분의 속성의 일부를 제거했습니다)

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