如何实现点击按钮切换OPEN/CLOSE文本并显示/隐藏div（无jQuery）

需求说明 #

已实现页面加载时div默认隐藏，点击按钮可切换div的显示/隐藏状态，现在需要同步切换按钮文本：点击“OPEN”后按钮变为“CLOSE”，点击“CLOSE”后变回“OPEN”。

修改后的完整代码 #

HTML代码

<button id="toggle">OPEN</button>
<div id="content" class="hidden">
  When the "OPEN" button is clicked, the text must change from OPEN to CLOSE, all depending if it is open or closed
</div>

CSS代码

.hidden {
  display: none;
}

JavaScript代码

var toggleBtn = document.querySelector("#toggle");
var contentDiv = document.querySelector("#content");

toggleBtn.addEventListener("click", function() {
  // 切换div的显示/隐藏状态
  contentDiv.classList.toggle("hidden");
  
  // 根据div的状态同步切换按钮文本
  if (contentDiv.classList.contains("hidden")) {
    toggleBtn.textContent = "OPEN";
  } else {
    toggleBtn.textContent = "CLOSE";
  }
});

实现逻辑说明 #

1. 点击按钮时，先通过classList.toggle()切换div的hidden类，完成显示/隐藏的基础功能；
2. 紧接着判断div是否包含hidden类：
   • 若包含（div处于隐藏状态），将按钮文本设为“OPEN”；
   • 若不包含（div处于显示状态），将按钮文本设为“CLOSE”。

通过这个逻辑就能实现按钮文本与div状态的同步切换。

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