title: Bootstrap accordion with dynamic php content
body: <p>I am trying to display dynamic content (dynamic custom fields) inside a boostrap accordion. In order to do so, I'm using $var to get de index of the while loop I'm in, and use that to discriminate the first element and set the &quot;aria-expanded&quot; property to &quot;true&quot; for the first element and &quot;false&quot; for the rest.</p>
  <p>When this code is executed, the &quot;aria-expanded&quot; property has &quot;true&quot; as value, and &quot;false&quot; on each other element in the accordion.</p>
  <pre><code>&lt;div class=&quot;accordion faqs&quot; id=&quot;accordionExample-b&quot;&gt;
  &lt;?php if( have_rows('preguntas') ): ?&gt;
      &lt;?php 
          $var = 0;
          while( have_rows('preguntas') ): the_row(); ?&gt;                &lt;div class=&quot;accordion-item&quot;&gt;
                  &lt;h2 class=&quot;&quot; id=&quot;&lt;?php echo('heading-'.$var)?&gt;&quot;&gt;
                      &lt;button class=&quot;accordion-button&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;&lt;?php echo('#collapse-'.$var)?&gt;&quot; 
                          aria-expanded=&quot;&lt;?php if($var==0):echo ('true'); else: echo ('false'); endif;?&gt;&quot; aria-controls=&quot;&lt;?php echo('collapse-'.$var)?&gt;&quot;&gt;
                          &lt;h3&gt;&lt;?php the_sub_field('pregunta'); ?&gt;&lt;/h3&gt;
                      &lt;/button&gt;
                  &lt;/h2&gt;
                  &lt;div id=&quot;&lt;?php echo('collapse-'.$var)?&gt;&quot; class=&quot;accordion-collapse collapse show&quot; aria-labelledby=&quot;&lt;?php echo('heading-'.$var)?&gt;&quot; data-bs-parent=&quot;#accordionExample-b&quot;&gt;
                      &lt;div class=&quot;&quot;&gt;
                          &lt;?php the_sub_field('respuesta'); ?&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;?php $var++; endwhile; ?&gt;
  &lt;?php endif; ?&gt;
  </code></pre>
  
  <p><strong>The problem is, when the page loads, all items are expanded, and if I click two times the same element, all other elements collapse.</strong></p>