HTMLを使用して同じページ内に複数のエキスパンドブロックを作成

Question

したがって、互いに独立して展開および折りたたむことができる複数のセクションを持つページを作成する必要がありました。私はしばらく前、私の研究を行なったし、この機能を「開発」することができました。このことから

<h2><a style="text-decoration:none;" onclick="if(document.getElementById('ID') .style.display=='none'){ 
 
document.getElementById('ID') .style.display=''; \t \t 
 
document.getElementById('IDtitle') .innerHTML='- (Collapse)';} \t \t 
 
else{ 
 
document.getElementById('ID') .style.display='none';document.getElementById('IDtitle') .innerHTML='+ (Expand)';}"><span id="IDtitle" style=" cursor: pointer; color: #7CA6C0;">+ (Expand)</span></a></h2> 
 
<p>Visible content</p> 
 
<div id="ID" style="display: none ;"> 
 
    My hidden content here 
 
</div>

は、私は上記をコピーし、ちょうどIDのを変更することにより、独立して動作する複数のパンダを作成することができます。私がこれらのうちの1から5までを持っていたとき、それはすべて上質で良かった。今私は少しのBIOSが追加されているプロジェクトに取り組んでおり、45ページを1ページで探しています。もう別の方法がなければならないのでしょうか？私がやっていることをする良い方法がありますか？

Answer 1

今のところ私は1つの解決法を提供しますが、jqueryを使用します。ここでは、HTMLに拡張可能な要素を追加するだけで、ロジックはすべてそれらのためになります。 data-attributesを経由してリンクで切り替えコンテナのidを設定する

Live demo

$('a').on('click', function(e){ 
    e.preventDefault(); 
    var clickedLink = $(this); 
    var relatedContainerId = clickedLink.data('container'); 
    var relatedContainer = $('#' + relatedContainerId); 
    if(relatedContainer.is(':visible')){ 
    relatedContainer.hide(); 
    clickedLink.find('span').text('+ (Expand)'); 
    }else{ 
    relatedContainer.show(); 
    clickedLink.find('span').text('- (Collapse)'); 
    } 
}); 

主なアイデア。これによると、あなたは何のdivを開くか隠すべきかを知っているでしょう。

---

UPD：jqueryのない同じ：JsFiddle