手風琴一次打開一個面板使用摺疊

Question

似乎這個問題已經被引導了3次，但是，我無法找到任何可摺疊的card s，更不用說它在PHP循環中實現了。

我正在通過高級自定義字段中繼器循環並將結果輸出到可摺疊的卡片中。

一切都運轉良好，除非我無法在另一張打開時讓手風琴關閉其他卡。一次只能打開一個。

<?php 
    // check if the repeater field has rows of data 
    if(have_rows('video_accordion')): ?> 
    <div id="accordion" class="col-sm-12" role="tablist" aria-multiselectable="false"> 
     <?php $index = 0; ?> 
    <?php // loop through the rows of data 
     while (have_rows('video_accordion')) : the_row(); ?> 

     <div class="card"> 

     <a data-toggle="collapse" class="<?php if($index != 0): echo 'collapsed'; else : endif; ?>" data-parent="#accordion" href="#collapse<?php echo $index; ?>" aria-expanded="false" aria-controls="collapse<?php echo $index; ?>"> 
      <div class="card-header" role="tab" id="heading<?php echo $index; ?>"> 
       <?php the_sub_field('video_title'); ?> 
      </div> 
     </a> 

     <div id="collapse<?php echo $index; ?>" class="collapse show <?php if($index == 0): echo 'in'; else : endif; ?>" role="tabpanel" aria-labelledby="heading<?php echo $index; ?>"> 
      <div class="card-block"> 
      <iframe src="https://player.vimeo.com/video/<?php the_sub_field('video_id'); ?>" width="640" height="288" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
      </div> 
     </div> 

     </div> 

    <?php $index ++ ?> 
    <?php endwhile; ?> 

編輯的要求

<div id="accordion" class="col-sm-12" role="tablist" aria-multiselectable="false"> 
    <div class="card"> 
    <a data-toggle="collapse" class="" data-parent="#accordion" href="#collapse_1" aria-expanded="false" aria-controls="collapse"> 
     <div class="card-header" role="tab" id="heading"> 
      title 1 
     </div> 
    </a> 

    <div id="collapse_1" class="collapse show" role="tabpanel" aria-labelledby="heading"> 
     <div class="card-block"> 
     <iframe src="https://player.vimeo.com/video/203710832" width="640" height="288" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
     </div> 
    </div> 

    <div class="card"> 
     <a data-toggle="collapse" class="" data-parent="#accordion" href="#collapse_2" aria-expanded="false" aria-controls="collapse"> 
     <div class="card-header" role="tab" id="heading"> 
      Title 2 
     </div> 
     </a> 

     <div id="collapse_2" class="collapse show" role="tabpanel" aria-labelledby="heading"> 
     <div class="card-block"> 
      <iframe src="https://player.vimeo.com/video/203710832" width="640" height="288" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
     </div> 
     </div> 

    </div> 
</div> <!-- end of accordion --> 

即使粘貼this example

HTML唯一的例子給出了相同的行爲。

非常感謝

Answer 1

在引導4，.collapse.in被.collapse.show取代。

您需要刪除所有class="collapse show"，並將其更改爲class="collapse"。在php代碼中添加show屬性時適用，而不是in。

<div id="accordion" class="col-sm-12" role="tablist" aria-multiselectable="false"> 
      <div class="card"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> 
        <div class="card-header" role="tab" id="heading1"> 
         title 
        </div> 
       </a> 
       <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1"> 
        <div class="card-block"> 
         block 
        </div> 
       </div> 
      </div> 
      <div class="card"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> 
        <div class="card-header" role="tab" id="heading2"> 
         title 
        </div> 
       </a> 
       <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2"> 
        <div class="card-block"> 
         block 
        </div> 
       </div> 
      </div> 
      <div class="card"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> 
        <div class="card-header" role="tab" id="heading3"> 
         title 
        </div> 
       </a> 
       <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="heading3"> 
        <div class="card-block"> 
         block 
        </div> 
       </div> 
      </div> 
     </div> 

演示：http://www.codeply.com/go/XEcJ5SZ4wN