Bootstrap 5循环生成折叠面板：如何仅默认展开第一个

要实现仅第一个折叠面板默认展开、其余收起，核心是在循环中判断当前项是否为第一个元素，仅为第一个元素添加show类，其余元素保留基础折叠类即可。同时需要同步调整折叠按钮的状态，符合Bootstrap的交互规范：

<?php foreach ($offers as $index => $item): ?>
<h2 class="accordion-header" id="heading<?php echo $item->id; ?>">
  <button class="accordion-button <?php echo $index !== 0 ? 'collapsed' : ''; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse<?php echo $item->id; ?>" aria-expanded="<?php echo $index === 0 ? 'true' : 'false'; ?>" aria-controls="collapse<?php echo $item->id; ?>">
    面板标题 <?php echo $item->id; ?>
  </button>
</h2>
<div id="collapse<?php echo $item->id; ?>" class="accordion-collapse collapse <?php echo $index === 0 ? 'show' : ''; ?>" aria-labelledby="heading<?php echo $item->id; ?>" data-bs-parent="#default-accordion-example">
  <div class="accordion-body">
    <?php echo $item->id; ?>
  </div>
</div>
<?php endforeach;?>

关键修改说明： #

• 借助foreach的索引变量$index判断当前元素是否为第一个（索引值为0）
• 仅第一个折叠面板的class追加show，其余面板只保留accordion-collapse collapse
• 同步调整折叠按钮状态：第一个按钮无需collapsed类，aria-expanded设为true；其余按钮添加collapsed类，aria-expanded设为false，确保交互逻辑与视觉状态一致

注：原代码缺少折叠触发按钮，已补充完整，否则折叠功能无法正常生效。

内容的提问来源于stack exchange，提问作者Lucas