[英]One panel open at a time on accordion using Collapse
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. 似乎对于引导程序3,这个问题已经被问了一百万遍了,但是,对于折叠式
card
,我找不到任何东西,更不用说在PHP循环中实现了。
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 要求的仅HTML示例
<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 非常感谢
In Bootstrap 4, .collapse.in
is replaced by .collapse.show
. 在Bootstrap 4中,
.collapse.in
替换为.collapse.show
。
You need to remove all the class="collapse show"
, and just change them to class="collapse"
. 您需要删除所有
class="collapse show"
,然后将其更改为class="collapse"
。 In the php code add show
attribute when appropiate instead of in
. 在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>
Demo: http://www.codeply.com/go/XEcJ5SZ4wN 演示: http : //www.codeply.com/go/XEcJ5SZ4wN
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.