单击时展开一个div并收缩其他div，再次单击后恢复到正常状态

<div class="container">
  <div class="div1" onclick="toggleDiv('div1')">Div 1</div>
  <div class="div2" onclick="toggleDiv('div2')">Div 2</div>
  <div class="div3" onclick="toggleDiv('div3')">Div 3</div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

div {
  padding: 10px;
  background-color: lightgray;
  margin-bottom: 5px;
  cursor: pointer;
}

.expanded {
  height: 200px;
}

.collapsed {
  height: 0;
}

function toggleDiv(divId) {
  var div = document.getElementById(divId);
  var container = div.parentNode;

  // 遍历其他div元素，将它们的CSS样式恢复到正常状态
  for (var i = 0; i < container.children.length; i++) {
    var child = container.children[i];
    if (child.id !== divId) {
      child.classList.remove('expanded');
      child.classList.add('collapsed');
    }
  }

  // 切换当前div的展开/收缩状态
  if (div.classList.contains('expanded')) {
    div.classList.remove('expanded');
    div.classList.add('collapsed');
  } else {
    div.classList.remove('collapsed');
    div.classList.add('expanded');
  }
}