Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

173
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda