实现点击展开可折叠列表项时隐藏其他元素的需求

需求说明 #

我需要实现一个可折叠列表，满足以下要求：

• 当其中一个列表项展开时，自动隐藏其他所有列表的展开内容
• 已展开的<div>被点击时，可切换为隐藏状态；再次点击对应按钮，能恢复展开状态

当前实现代码 #

JavaScript #

var coll = document.getElementsByClassName("collapsecontent");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

CSS #

button.collapsecontent {
  display: block;
  background-color: orange;
  border-color: blue;
  border-radius: 20px;
  width: 87.5%;
  margin-left: 6.2%;
  margin-top: 1%;
  transition: ease-out 10s;
  /*transition broken*/
  cursor: pointer;
}

div.content {
  display: none;
  background-color: orange;
  margin-left: 6.2%;
  margin-right: 6.2%;
  padding: 5%;
  border: 2px solid blue;
  border-radius: 20px;
  cursor: pointer;
}

HTML #

<ul class="contentbox">
  <!--content boxes-->
  <button class="collapsecontent" type="button"><li class="contentbox"><h1>Works</h1></li></button>
  <div class="content">
    <p>Example</p>
  </div>


  <button class="collapsecontent" type="button"><li class="contentbox"><h1>Other</h1></li></button>
  <div class="content">
    <p>Example2</p>
  </div>


  <button class="collapsecontent" type="button"><li class="contentbox"><h1>About</h1></li></button>
  <div class="content">
    <p>Example3</p>
  </div>


  <button class="collapsecontent" type="button"><li class="contentbox"><h1>Placeholder</h1></li></button>
  <div class="content">
    <p>Example4</p>
  </div>

</ul>

补充说明 #

除了折叠式方案，我也愿意接受其他能达成相同效果的实现方式。

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