Bootstrap accordion with dynamic php content-CodePudding

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.

CodePudding user response：

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