Estoy tratando de mostrar contenido dinámico (campos personalizados dinámicos) dentro de un acordeón boostrap. Para hacerlo, estoy usando $var para obtener el índice del ciclo while en el que estoy, y lo uso para discriminar el primer elemento y establecer la propiedad "aria-expandida" en "verdadero" para el primer elemento y "falso" para el resto.
Cuando se ejecuta este código, la propiedad "aria-expandida" tiene "verdadero" como valor y "falso" en cada uno de los demás elementos del acordeón.
<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; ?>El problema es que, cuando se carga la página, todos los elementos se expanden y si hago clic dos veces en el mismo elemento, todos los demás elementos colapsan.
Debe aplicar show class SOLAMENTE al primer elemento accordion-collapse , por lo que debe verificar que el índice de bucle sea 0 y luego aplicar show class.
class="accordion-collapse collapse <?php if($var==0){echo ('show')}; ?>"entonces tu código debe verse así:
<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; ?>