ACF 中继器手风琴循环问题

Question

我一直在尝试将手风琴块集成到 ACF 循环中：

<?php elseif ( get_row_layout() == 'accordeon' ) : ?>
    <?php if ( have_rows( 'cases' ) ) : ?>
        <div class="accordeon-bloc clear">
            <?php while ( have_rows( 'cases' ) ) : the_row(); ?>
                <div class="tab">
                    <input id="tab" type="checkbox" name="tabs">
                    <label for="tab"><?php the_sub_field( 'titre_du_bloc' ); ?></label>
                    <div class="tab-title"><?php the_sub_field( 'label' ); ?></div>
                    <div class="tab-content">
                        <p><?php the_sub_field( 'descriptif' ); ?></p>
                    </div>
                </div>
            <?php endwhile; ?>
        </div>
    <?php else : ?>
        <?php // no rows found ?>
    <?php endif; ?>

这是 CSS :

input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s;
}

/* :checked */
.tab input:checked ~ .tab-content {max-height: 10em;}

所以这是我的问题：当我添加多个手风琴组时，我有几个选项卡 div，但是当我单击“+”以显示选项卡内容组时，它总是显示第一个的内容，因为它们显然都具有相同的 class.

我在构建循环之前没有想过这个问题，我也不知道如何解决这个问题。我对 javascript 的知识为零，但也许这里有解决方案？或者 CSS 并选择第 n/n+1 个元素 ?

在此先感谢您的帮助！

编辑：我通过在 ADF 中添加一个 ID 字段并修改循环找到了解决方案：

<div class="tab">
    <input id="<?php the_sub_field( 'identifiant' ); ?>" type="checkbox" name="tabs">
    <label for="<?php the_sub_field( 'identifiant' ); ?>"><?php the_sub_field( 'icone' ); ?><?php the_sub_field( 'titre_du_bloc' ); ?></label>
    <div class="tab-title"><?php the_sub_field( 'label' ); ?></div>
    <div class="tab-content">
        <p><?php the_sub_field( 'descriptif' ); ?></p>
    </div>
</div>

但也许有更好的解决方案，不需要手动输入！

Answer 1

我认为这里的问题是容器（在本例中为 <div class="tab">）缺少 position: relative 属性，并且各种 input 一个接一个地结束，因为position: absolute 属性。

这是一个有效的 fiddle，但进行了以下更改：

.tab { position: relative; }

.tab input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

ACF 中继器手风琴循环问题

Issue with ACF repeater accordeon loop

wordpress

loops

repeater

advanced-custom-fields