折叠内容-Javascript CSS

我正在寻找帮助，修改我拼凑在一起的代码，以展开一个面板来显示项目的全部细节

对于页面上的单个元素，代码可以正常工作。但是，我想更改它，以便可以列出多个项目。但是，目前，当我添加其他面板时，它们不会折叠和展开，只有第一个实例起作用

我假设我需要以某种方式调整Javascript，以便它可以链接到每个唯一的实例

我知道jquery和bootstrap提供了一些现有的包，但由于一些原因，我不想深入讨论，这些包对我来说很难实现，所以我希望有人能帮助我修改这些代码以使其正常工作

window.onload=function（）{
var tagList=document.getElementById（'tagList'）
var style=window.getComputedStyle（标记列表）
var display=String（style.getPropertyValue（'display'）；
tagList.style.display='none'；
document.getElementById（'clearance-item-header'）。addEventListener（'click'，function（）{
var tagList=document.getElementById（'tagList'）
var style=window.getComputedStyle（标记列表）
var display=String（style.getPropertyValue（'display'）；
如果（显示=‘无’）{
tagList.style.display='inline'；
document.getElementById（'toggleExpandBtn'）。textContent='[-]'；
}否则{
//style.setProperty（'height'，lineheight*3+'px'）；
tagList.style.display='none'；
document.getElementById（'toggleExpandBtn'）。textContent='[+]'；
}
});
}

#标记列表{溢出：隐藏；}
.clearance项{边框：2px实心#C00；边框半径：4px；背景：#FFF；填充：10px；宽度：675px；左边距：自动；右边距：自动；位置：相对；}
.clearance项目图像{宽度：200px；高度：100px；浮动：左侧；填充右侧：10px；}
.clearance项目图像img{显示：块；左边距：自动；右边距：自动；高度：100px；}
.清除项目标题{宽度：450px；浮动：左；}
.clearance项目标题h2{页边距底部：7px；填充顶部：3px；颜色：#C00；字体大小：24px；字体重量：粗体；}
.清除项目详细信息{宽度：300px；浮动：左；}
.clearance项目详细信息p{页边距底部：7px；颜色：#000；字体大小：16px；字体重量：粗体；}
.clearance项目价格{宽度：105px；浮动：左侧；填充右侧：60px；}
.clearance item price>div{页边距底部：7px；颜色：#C00；字体大小：18px；字体重量：粗体；文本对齐：右；}
#toggleExpandBtn{宽度：30px；位置：绝对；右侧：8px；底部：8px；字体大小：24px；字体大小：粗体；颜色：#C00；z索引：9999；}
#清除项目标题{游标：指针；}
#buylink{width:250px；position:relative；overflow:hidden；float:right；margin top:5px；margin left:10px；}
.buylink产品选择{最大宽度：200px！重要；}
.清除项目内容{填充顶部：10px；}
.clearance项目内容h3{页边距底部：8px；颜色：#000；字体大小：16px；字体重量：粗体；}
.clearance项目内容p{页边距底部：6px；文本对齐：对齐；}

产品全称
条件：新/旧/其他

地点：布莱顿

999.99英镑

[+]
品名
对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？你是否应该在一个自由的世界里为自己的利益辩护？你是否应该在一个自由的世界里为自己的利益辩护

你说

目前，当我添加其他面板时，它们不会折叠和展开，只有第一个实例起作用

---

你能提供一些额外面板的代码吗？如果没有看到您的代码，很难判断，尽管我建议您确保每个面板和按钮都有唯一的ID。否则，您将从js获得您正在体验的结果。

好的。我明白了。将样式id更改为类，并让javascript为每个实例动态分配唯一id，并将click事件添加到header div。然后使用此.getAttribute（“id”）获取被单击的header实例的id。用于将关联内容的“显示”设置为“内联”或“无”

window.onload=function（）{
var headerclassname=document.getElementsByClassName（“项目标题”）；
对于（var i=0；i