title: Issue with ACF repeater accordeon loop
body: <p>I've been trying to integrade accordeon blocs in an ACF loop as so :</p>
  
  <pre><code>&lt;?php elseif ( get_row_layout() == 'accordeon' ) : ?&gt;
      &lt;?php if ( have_rows( 'cases' ) ) : ?&gt;
          &lt;div class="accordeon-bloc clear"&gt;
              &lt;?php while ( have_rows( 'cases' ) ) : the_row(); ?&gt;
                  &lt;div class="tab"&gt;
                      &lt;input id="tab" type="checkbox" name="tabs"&gt;
                      &lt;label for="tab"&gt;&lt;?php the_sub_field( 'titre_du_bloc' ); ?&gt;&lt;/label&gt;
                      &lt;div class="tab-title"&gt;&lt;?php the_sub_field( 'label' ); ?&gt;&lt;/div&gt;
                      &lt;div class="tab-content"&gt;
                          &lt;p&gt;&lt;?php the_sub_field( 'descriptif' ); ?&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;?php endwhile; ?&gt;
          &lt;/div&gt;
      &lt;?php else : ?&gt;
          &lt;?php // no rows found ?&gt;
      &lt;?php endif; ?&gt;
  </code></pre>
  
  <p>An here is the CSS :</p>
  
  <pre><code>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;}
  </code></pre>
  
  <p>So here is my issue : when I add more than one accordeon bloc, I have several tab divs, but when I click on the "+" to reveal the tab-content bloc, it always show the first one's content, as they obviously all have the same class.</p>
  
  <p>I hadn't thought of that issue before building the loop and I can't find out how to solve this. I have zero knowledge in javascript but maybe there's a solution here ? Or something with CSS and selecting the nth / nth + 1 element ?</p>
  
  <p>Thanks in advance for you help !</p>
  
  <p>EDIT :
  I found a solution by adding an ID field in ADF and by modifing the loop as so :</p>
  
  <pre><code>&lt;div class="tab"&gt;
      &lt;input id="&lt;?php the_sub_field( 'identifiant' ); ?&gt;" type="checkbox" name="tabs"&gt;
      &lt;label for="&lt;?php the_sub_field( 'identifiant' ); ?&gt;"&gt;&lt;?php the_sub_field( 'icone' ); ?&gt;&lt;?php the_sub_field( 'titre_du_bloc' ); ?&gt;&lt;/label&gt;
      &lt;div class="tab-title"&gt;&lt;?php the_sub_field( 'label' ); ?&gt;&lt;/div&gt;
      &lt;div class="tab-content"&gt;
          &lt;p&gt;&lt;?php the_sub_field( 'descriptif' ); ?&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But maybe there's a better solution that doesn't require manual input !</p>