我有一些普通的 JavaScript 可以监听点击，当点击时，会发生四件事：

1. “表单打开”类已添加到按钮
2. “aria-expanded”属性设置为“true”
3. 显示之前隐藏的 div。
4. 按钮的“after”文本更改为“Close info”（这是根据按钮是否包含新类“form-opened”通过 CSS 控制的。）

当单击另一个按钮时，第一次单击的按钮会发生相反的情况，添加的类被删除，“aria-expanded”属性被重新设置为“false”，div 再次隐藏（再次设置为CSS）并且“之后”文本恢复为“阅读更多”。

但是，如果第二次单击同一个按钮，同时添加的类按预期删除，并且 div 再次隐藏，“aria-expanded”属性不会重新设置为“false”。谁能解释一下原因并告诉我应该做什么？ （没有 jQuery，谢谢）。

const tips = Array.from(document.querySelectorAll('.toggle-button'));
tips.forEach((tip) => {
    tip.addEventListener('click', () => {
        tips
        .filter((f) => f !== tip)
        .forEach((f) => {
        f.setAttribute('aria-expanded', false);
        f.classList.remove('form-opened');
        });
        tip.setAttribute('aria-expanded', true);
        tip.classList.contains('form-opened');
        tip.classList.toggle('form-opened');
    });
});

.toggle-button ~ .tips {
  display: none;
}
button.toggle-button[aria-expanded="false"]:after {
  content: "Read more";
}
.toggle-button.form-opened ~ .tips {
  display: block;
  margin-bottom: 16px;
}
button.toggle-button[aria-expanded="true"]:after {
  content: "Close info";
  cursor: pointer;
}
.visually-hidden {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}

Open or Close info

  Here is some text that is to be revealed 


Open or Close info

  Here is some text that is to be revealed 


Open or Close info

  Here is some text that is to be revealed 

我见过一些类似的查询，但不完全相同或非常旧，或者它们使用 jQuery。