如何实现Collapsible按钮互斥折叠：一次仅展开一个

问题说明 #

现有3个带折叠功能的按钮，当前支持同时展开多个，需要修改为互斥模式：打开任意一个按钮时，自动关闭其他已展开的按钮。

修改方案 #

只需修改JavaScript代码，核心逻辑是：点击按钮时，先遍历所有折叠按钮，关闭当前按钮之外的所有展开状态，再处理当前按钮的展开/折叠。

修改后的完整代码 #

JavaScript 代码

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

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    // 遍历所有折叠按钮，关闭当前按钮之外的展开项
    for (let j = 0; j < coll.length; j++) {
      if (coll[j] !== this) {
        coll[j].classList.remove("active");
        const otherContent = coll[j].nextElementSibling;
        otherContent.style.maxHeight = null;
      }
    }
    // 处理当前按钮的展开/折叠状态
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

CSS 代码（无需修改）

.informacion {
  margin-top: 40px;
  margin-bottom: 10px;
  margin-left: 200px;
  margin-right: 190px;
  display: flex;
}

/*button:nth-child(1) {
  background-image: url("https://cdn.shopify.com/s/files/1/0631/2886/2962/files/01.jpg?v=1690838660");
  color: #fff;
}

button:nth-child(3) {
  background-image: url("https://cdn.shopify.com/s/files/1/0631/2886/2962/files/02.jpg?v=1690838660");
  color: #fff;
}*/

@media screen and (min-width: 1400px) {
  .informacion {
    margin-left: -70px;
  }

}

.collapsible {
  background-color: rgba(250, 206, 205, 0.6);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  cursor: pointer;
  /*padding: 18px;*/
  padding: 10px 20px 10px 20px; /*顺序：上、右、下、左*/
  width: 800px;
  outline: none;
  border-radius: 50px 50px 50px 50px;
  border: solid #facecd 5px;
  flex-grow: 2;
}

.collapsible {
  height: 60px;
  margin-right: -60px;
  font-family: 'Axiforma';
  font-weight: 300;
  font-size: 20px;
  text-align: center;
  letter-spacing: 7px;
  text-shadow: 2px 2px 8px #000;
}

.active, .collapsible:hover {
  background-color: #fff;
}

/*.collapsible:after {
  content: '\002B';
  color: #000;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}*/

.content {
  position: relative;
  top: 60px;
  right: 70px;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #fde2e2;
  border-radius: 40px 40px 40px 40px;
  font-size: 17px;
  line-height: 25px;
}

.content p {
  /*margin-left: 100px;*/
  font-family: 'Axiforma';
  font-weight: 400;
  margin-top: 20px;
  padding-bottom: 10px;
}

.content li {
  margin-left: 100px;
}

HTML 代码（无需修改）

<div class="informacion">
  <button class="collapsible">ABOUT US</button>
  <div class="content">
    <p>Maria Cecilia Sparacio, the founder of The Pink Room Shapewear (Family business), hails from Cali, Colombia. After studying law and working as a bank manager in Bogota, Colombia, Maria arrived in the United States in 2001. Initially planning for a temporary stay to improve her English skills on a student visa, she was captivated by the opportunities this country had to offer, leading her to pursue the American dream.</p>
  </div>

  <button class="collapsible">F.A.Q</button>
  <div class="content">
    <p>We have compiled a comprehensive list of questions and answers to provide you with the information you need about our shape-wear products and services.
      Whether you're curious about the types of shape-wear we offer, how to choose the right size, or our return policy, you'll find the answers here.</p>
  </div>

  <button class="collapsible">LOCATIONS</button>
  <div class="content">
    <p>You can find us at
      <ul>
        <li>249 Morris Avenue, Elizabeth New Jersey 07208, United States</li>
        <li>1994 Morris Avenue, Union New Jersey 07083, United States</li>
      </ul>
    </p>
  </div>
</div>

修改说明 #

1. 在按钮点击事件中新增循环，遍历所有.collapsible元素
2. 对非当前点击的按钮，移除active类并将对应内容区域的maxHeight设为null，强制关闭展开状态
3. 保留原有的当前按钮切换逻辑，实现点击时要么展开（此时其他按钮已全部关闭），要么折叠

内容的提问来源于stack exchange，提问作者Fabio Chirino Spades