Bootstrap 5 点击collapse折叠按钮时切换按钮文本的实现问题

Bootstrap 5 对折叠组件的事件做了统一命名，你可以通过以下两种方案实现点击切换按钮文本的效果：

方案1：监听折叠原生事件（推荐，兼容性更强） #

该方案直接监听Bootstrap 5官方提供的折叠状态切换事件，不会因为点击逻辑变动出现异常：

• 你原有代码中aria-controls属性值有误，先修正为对应折叠面板的id：把<a>标签的aria-controls="collapseExample"修改为aria-controls="hiddenContent"
• 加入以下JS代码即可实现效果：

const toggleBtn = document.getElementById('toggle');
const collapsePanel = document.getElementById('hiddenContent');

// 面板完全展开后修改按钮文本为Hide
collapsePanel.addEventListener('shown.bs.collapse', () => {
  toggleBtn.textContent = 'Hide';
})

// 面板完全收起后修改按钮文本为Show
collapsePanel.addEventListener('hidden.bs.collapse', () => {
  toggleBtn.textContent = 'Show';
})

方案2：通过点击事件判断状态（更简洁） #

Bootstrap 5会自动切换按钮的aria-expanded属性值，直接判断该属性即可：

document.getElementById('toggle').addEventListener('click', function() {
  this.textContent = this.getAttribute('aria-expanded') === 'true' ? 'Show' : 'Hide';
})

完整可运行示例代码 #

<div class="p-3">9 Members Online
  <a class="p-1 btn btn-info" data-bs-toggle="collapse" id="toggle" href="#hiddenContent" role="button" aria-expanded="false" aria-controls="hiddenContent">Show</a>
</div>

<div class="collapse" id="hiddenContent">
  <div class="card card-body bg-transparent">
    Member 1. <br><br> Member 2.<br><br> Member 3.<br><br> Member 4.<br><br> Member 5.<br><br> Member 6.<br><br> Member 7.<br><br> Member 8.<br><br> Member 9.<br><br>
  </div>
</div>

<script>
const toggleBtn = document.getElementById('toggle');
const collapsePanel = document.getElementById('hiddenContent');

collapsePanel.addEventListener('shown.bs.collapse', () => {
  toggleBtn.textContent = 'Hide';
})

collapsePanel.addEventListener('hidden.bs.collapse', () => {
  toggleBtn.textContent = 'Show';
})
</script>

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