One panel open at a time on accordion using Collapse

Question

It seems that this question has been asked a million times for bootstrap 3, however, I am unable to find anything for collapsable card s, let alone it being implemented in a PHP loop.

I am looping through an Advanced Custom Fields repeater and outputting the result into collapsable cards.

Everything is working well except I am unable to make the accordion close other cards when another one is open. There should only be one open at a time.

<?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 only example as requested

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

Even pasting this example gives the same behaviour.

Many thanks

Answer 1

In Bootstrap 4, .collapse.in is replaced by .collapse.show .

You need to remove all the class="collapse show" , and just change them to class="collapse" . In the php code add show attribute when appropiate instead of 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>

Demo: http://www.codeply.com/go/XEcJ5SZ4wN