<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