Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

165
Views
Acordeón Bootstrap con contenido php dinámico

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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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; ?>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!