0
我正在寻找帮助修改我拼凑在一起的代码，以展开一个面板以显示项目的全部细节。Collapsing Content - Javascript CSS
该代码适用于页面上的单个元素。但是，我想更改它，以便可以列出多个项目。但是，目前当我添加额外的面板时，它们不会折叠并只展开一阶作品。
我想我需要以某种方式调整Javascript，以便它可以链接到每个独特的实例。
我知道现有的包可用于jquery和bootstrap，但由于我不会进入这些的原因，我很难实现，所以我希望有人可以帮助我修改此代码的工作。
window.onload=function(){
var tagList = document.getElementById('tagList')
var style = window.getComputedStyle(tagList)
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(tagList)
var display = String(style.getPropertyValue('display'));
if (display == 'none') {
tagList.style.display = 'inline';
document.getElementById('toggleExpandBtn').textContent = '[-]';
} else {
//style.setProperty('height',lineheight*3+'px');
tagList.style.display = 'none';
document.getElementById('toggleExpandBtn').textContent = '[+]';
}
});
}<style type='text/css'>
#tagList { overflow: hidden; }
\t .clearance-item {border:2px solid #C00;border-radius:4px;background: #FFF; padding:10px; width: 675px; margin-left:auto; margin-right:auto; position:relative;}
\t .clearance-item-image {width:200px; height:100px; float:left; padding-right: 10px;}
\t .clearance-item-image img {display: block; margin-left: auto; margin-right: auto; height: 100px;}
\t .clearance-item-title {width:450px; float:left;}
\t .clearance-item-title h2 {margin-bottom:7px; padding-top: 3px; color:#C00; font-size:24px; font-weight:bold;}
\t .clearance-item-detail {width:300px; float:left;}
\t .clearance-item-detail p {margin-bottom:7px; color:#000; font-size:16px; font-weight:bold;}
\t .clearance-item-price {width:105px; float:left; padding-right: 60px;}
\t .clearance-item-price > div {margin-bottom:7px; color:#C00; font-size:18px; font-weight:bold; text-align:right;}
\t #toggleExpandBtn {width: 30px; position:absolute; right: 8px; bottom: 8px; font-size:24px; font-weight:bold; color:#C00; z-index:9999;}
\t #clearance-item-header {cursor:pointer;}
\t #buylink {width:250px; position:relative; overflow:hidden; float:right; margin-top: 5px; margin-left: 10px;}
\t .buylink-product select {max-width:200px !important;}
\t .clearance-item-content { padding-top:10px; }
\t .clearance-item-content h3 { margin-bottom:8px; color:#000; font-size:16px; font-weight:bold;}
\t .clearance-item-content p { margin-bottom:6px; text-align:justify; }
</style><div class="clearance-item">
<div id="clearance-item-header">
<div class="clearance-item-image">
\t <img src="images/clearance-item.jpg" width="100" height="100" />
</div>
<div class="clearance-item-title">
<h2>Product Full Title</h2>
</div>
<div class="clearance-item-detail">
<p>Condition: New/Used/Other</p>
<p>Location: Brighton</p>
</div>
<div class="clearance-item-price">
<p>£999.99</p>
</div>
<div id="toggleExpandBtn">[+]</div>
<div style="clear:both;"></div>
</div>
<div id='tagList'>
<div class="clearance-item-content">
<h3>Product Name</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
\t </div>
<div style="clear:both;"></div>
</div>
</div>