Javascript 如何创建多个切换按钮？

我正在尝试制作一个手风琴。当只有一个项目时，它非常有效。每当我试图在代码下面添加相同的div时，它就会崩溃。我该怎么做才能使这段代码适用于多个相同的div

var panel=document.querySelector（“.panel”）；
var按钮=document.querySelector（“.accordion”）；
addEventListener（“单击”，函数（）{
如果（panel.style.display==“无”）{
panel.style.display=“块”；
}否则{
panel.style.display=“无”；
}
});
.panel{
显示：无
}
第1节
Lorem ipsum Door sit amet，奉献精英，以最快的速度前进
不依赖于
id
，而是通过面板相对于单击的按钮元素的位置来参考面板。并且，不要为每个按钮设置事件处理程序，而是在整个结构的容器上使用并设置一个处理程序

另外，不要使用内联样式。这里的API非常简单，非常有用

最后，在
div
内部有
p
是多余的


//将所有面板放入一个集合中
让panels=document.queryselectoral（“.panel”）；
//在包含所有按钮和面板的容器上设置一个事件处理程序
document.querySelector（“.accordion”）.addEventListener（“单击”），函数（事件）{
//首先，隐藏所有面板
面板。forEach（功能（面板）{
panel.classList.add（“隐藏”）；
});
//如果单击了一个按钮
if（event.target.classList.contains（“btn”）{
//现在，只显示选定的面板
event.target.nextElementSibling.classList.toggle（“隐藏”）；
}
});
。隐藏{
显示：无
}
.btn{display:block；}

第一节

1洛雷姆·伊普苏姆·多洛·希特·阿梅特，一位杰出的献身者，以最快的速度前进

第二节

2洛雷姆·伊普苏姆·多洛·希特·艾米特，与精英共事，以最快的速度前进

第三节

3洛雷姆·伊普苏姆·多洛尔·希特·阿梅特，一位杰出的献身者，以最快的速度前进

第四节

4 Lorem ipsum Door sit amet，奉献精英，以最快的速度前进

不依赖于
id
，而是通过面板相对于单击的按钮元素的位置来参考面板。并且，不要为每个按钮设置事件处理程序，而是在整个结构的容器上使用并设置一个处理程序

另外，不要使用内联样式。这里的API非常简单，非常有用

最后，在
div
内部有
p
是多余的


//将所有面板放入一个集合中
让panels=document.queryselectoral（“.panel”）；
//在包含所有按钮和面板的容器上设置一个事件处理程序
document.querySelector（“.accordion”）.addEventListener（“单击”），函数（事件）{
//首先，隐藏所有面板
面板。forEach（功能（面板）{
panel.classList.add（“隐藏”）；
});
//如果单击了一个按钮
if（event.target.classList.contains（“btn”）{
//现在，只显示选定的面板
event.target.nextElementSibling.classList.toggle（“隐藏”）；
}
});
。隐藏{
显示：无
}
.btn{display:block；}

第一节

1洛雷姆·伊普苏姆·多洛·希特·阿梅特，一位杰出的献身者，以最快的速度前进

第二节

2洛雷姆·伊普苏姆·多洛·希特·艾米特，与精英共事，以最快的速度前进

第三节

3洛雷姆·伊普苏姆·多洛尔·希特·阿梅特，一位杰出的献身者，以最快的速度前进

第四节

4 Lorem ipsum Door sit amet，奉献精英，以最快的速度前进

您想拥有多个
div
元素，这些元素将使用
第1节按钮显示/隐藏？我想在下面添加另一个按钮和div类。所以我在一列中有几个按钮，上面有不同的问题。我想让它像手风琴一样处理问题。我已经用示例编辑了我的问题。看到了吗？你想有多个
div
元素，这些元素将使用
第1节
按钮显示/隐藏？我想在下面添加另一个按钮和div类。所以我在一列中有几个按钮，上面有不同的问题。我希望它能像手风琴一样处理问题。我用示例编辑了我的问题。看到这个了吗