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>