如何在单击时逐个展开和折叠div

<div class="toggle-div">
  <h3>标题1</h3>
  <p>内容1</p>
</div>

<div class="toggle-div">
  <h3>标题2</h3>
  <p>内容2</p>
</div>

<div class="toggle-div">
  <h3>标题3</h3>
  <p>内容3</p>
</div>

// 获取所有具有共同类名的div元素
var toggleDivs = document.getElementsByClassName("toggle-div");

// 遍历每个div元素，为其添加点击事件监听
for (var i = 0; i < toggleDivs.length; i++) {
  toggleDivs[i].addEventListener("click", function() {
    // 切换当前点击的div的展开/折叠状态
    this.classList.toggle("active");

    // 获取当前点击的div下的内容元素
    var content = this.querySelector("p");

    // 判断当前div是否处于展开状态
    if (content.style.display === "block") {
      // 如果是展开状态，则折叠div
      content.style.display = "none";
    } else {
      // 如果是折叠状态，则展开div
      content.style.display = "block";
    }
  });
}

.toggle-div {
  cursor: pointer;
  margin-bottom: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}

.toggle-div h3 {
  margin: 0;
}

.toggle-div p {
  display: none;
  margin-top: 10px;
}

.toggle-div.active {
  background-color: #e0e0e0;
}

.toggle-div.active p {
  display: block;
  animation: fade-in 0.5s ease-in-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}