<div class="col-md-6"> <div class="accordion" id="accordionLeft"> <?php $count = 0; ?> <?php while ($faq_posts->have_posts() && $count < 4): $faq_posts->the_post(); ?> <div class="accordion-item"> <h2 class="accordion-header" id="heading-<?php the_ID(); ?>"> <button class="accordion-button<?php echo ($count === 0) ? '' : ' collapsed'; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-<?php the_ID(); ?>" aria-expanded="<?php echo ($count === 0) ? 'true' : 'false'; ?>" aria-controls="collapse-<?php the_ID(); ?>"> <?php the_title(); ?> </button> </h2> <div id="collapse-<?php the_ID(); ?>" class="accordion-collapse collapse<?php if ($count === 0) echo ' show'; ?>" aria-labelledby="heading-<?php the_ID(); ?>" data-bs-parent="#accordionRight"> <div class="accordion-body"> <?php the_content(); ?> </div> </div> </div> <?php $count++; ?> <?php endwhile; ?> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter