Css 在React中展开和折叠div

下面的沙盒显示了两个正在扩展和正在折叠的div，我只是用它们来测试一个模板。每个选项都将切换展开/折叠右侧隐藏的div

我想做的是使它在单击展开一个div时，另一个div将折叠。添加该功能的最简单方法是什么

如果您能提供逻辑方面的建议或解决方案，我将不胜感激。我正在考虑设置一个handleClick函数，该函数表示当div“x”是活动div时关闭所有其他div，但我不完全确定这里的逻辑或解决方案。非常感谢您的帮助

代码沙盒：

---

谢谢。

在单击时切换菜单，同时关闭另一个菜单

{
setToggle（！toggle）；
setToggle1（假）；
}}
>
...
{
setToggle1（！toggle1）；
设置切换（假）；
}}
>

---

codesandbox:

感谢您的帮助。我很感激。我的最后一个问题是，我计划有四个div，它们将被切换。有没有更简单的方法来设置功能，这样我就不必为每个div编写四组setToggle（false）？@GoreSometimes您可以为所有div编写一个状态，使其只使用一个setState。如果您不介意我问的话，您能否给我举个例子，或者为我指出可以这样做的正确方向？我相信它将与useContext一起使用，但到目前为止，我只学到了react的基本知识。谢谢你的帮助。谢谢你。@goresometime你不需要使用上下文。使用数组或对象就可以了。