アコーディオンを一度に1つずつ開くCollapseを使用して

Question

この質問はブートストラップ3の100万回の質問ですが、折りたたみ可能なcardのものは見つけられません。 。

私はAdvanced Custom Fieldsリピータをループし、その結果を折りたたみ可能なカードに出力しています。

他のカードが開いているときに、他のカードを閉じることができないことを除いて、すべてうまくいきます。一度に1つしか開いてはいけません。でもthis exampleを貼り付ける

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

を要求したとして

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

EDIT

HTMLのみの例では、同じ動作を提供します。ブートストラップ4、.collapse.inで

感謝

Answer 1

は.collapse.showに置き換えられます。

class="collapse show"をすべて削除し、class="collapse"に変更するだけです。 PHPコードではinの代わりにshow属性を追加してください。

<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