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 "aria-expanded" property to "true" for the first element and "false" for the rest.
When this code is executed, the "aria-expanded" property has "true" as value, and "false" on each other element in the accordion.
<div class="accordion faqs" id="accordionExample-b">
<?php if( have_rows('preguntas') ): ?>
<?php
$var = 0;
while( have_rows('preguntas') ): the_row(); ?> <div class="accordion-item">
<h2 class="" id="<?php echo('heading-'.$var)?>">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="<?php echo('#collapse-'.$var)?>"
aria-expanded="<?php if($var==0):echo ('true'); else: echo ('false'); endif;?>" aria-controls="<?php echo('collapse-'.$var)?>">
<h3><?php the_sub_field('pregunta'); ?></h3>
</button>
</h2>
<div id="<?php echo('collapse-'.$var)?>" class="accordion-collapse collapse show" aria-labelledby="<?php echo('heading-'.$var)?>" data-bs-parent="#accordionExample-b">
<div class="">
<?php the_sub_field('respuesta'); ?>
</div>
</div>
</div>
<?php $var++; endwhile; ?>
<?php endif; ?>
The problem is, when the page loads, all items are expanded, and if I click two times the same element, all other elements collapse.
You must apply show class ONLY to the first accordion-collapse element, so you must verify that the loop index is 0 then apply show class.
class="accordion-collapse collapse <?php if($var==0){echo ('show')}; ?>"
then your code must look like that:
<div class="accordion faqs" id="accordionExample-b">
<?php if( have_rows('preguntas') ): ?>
<?php
$var = 0;
while( have_rows('preguntas') ): the_row(); ?> <div class="accordion-item">
<h2 class="" id="<?php echo('heading-'.$var)?>">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="<?php echo('#collapse-'.$var)?>"
aria-expanded="<?php if($var==0):echo ('true'); else: echo ('false'); endif;?>" aria-controls="<?php echo('collapse-'.$var)?>">
<h3><?php the_sub_field('pregunta'); ?></h3>
</button>
</h2>
<div id="<?php echo('collapse-'.$var)?>" class="accordion-collapse collapse <?php if($var==0){echo ('show')}; ?>" aria-labelledby="<?php echo('heading-'.$var)?>" data-bs-parent="#accordionExample-b">
<div class="">
<?php the_sub_field('respuesta'); ?>
</div>
</div>
</div>
<?php $var++; endwhile; ?>
<?php endif; ?>