Problem mit ACF-Repeater-Akkordeonschleife

Ich habe versucht, Akkordeonblöcke wie folgt in eine ACF-Schleife zu integrieren:

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

Und hier ist das 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;}

Hier ist also mein Problem: Wenn ich mehr als einen Akkordeonblock hinzufüge, habe ich mehrere Tab-Divs, aber wenn ich auf das “+” klicke, um den Tab-Inhaltsblock anzuzeigen, wird immer der Inhalt des ersten angezeigt, da sie offensichtlich alle sind haben die gleiche Klasse.

Ich hatte vor dem Erstellen der Schleife nicht an dieses Problem gedacht und kann nicht herausfinden, wie ich das lösen kann. Ich habe keine Kenntnisse in Javascript, aber vielleicht gibt es hier eine Lösung? Oder etwas mit CSS und Auswahl des n-ten / n-ten + 1-Elements?

Danke im Voraus für eure Hilfe!

BEARBEITEN: Ich habe eine Lösung gefunden, indem ich ein ID-Feld in ADF hinzugefügt und die Schleife so geändert habe:

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

Aber vielleicht gibt es eine bessere Lösung, die keine manuelle Eingabe erfordert!

Ich denke, das Problem hier ist, dass der Container (<div class="tab"> in diesem Fall) fehlte die position: relative Attribut und die verschiedenen input landeten übereinander, wegen der position: absolute Attribut.

Hier ist eine Arbeit Geige mit folgenden Änderungen:

.tab { position: relative; }

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