使用HTML在同一页面中创建多个扩展块

Question

所以，我需要创建一个有多个部分的页面，这些部分可以相互独立地展开和折叠。我做了一些研究，并且能够"开发"这个功能:

<h2><a style="text-decoration:none;" onclick="if(document.getElementById('ID') .style.display=='none'){ 
document.getElementById('ID') .style.display='';	 	 
document.getElementById('IDtitle') .innerHTML='- (Collapse)';} 	 	 
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个。肯定还有别的办法，对吧?有更好的方法来做我正在做的事情吗?

Answer 1

现在我将提供一个解决方案，但使用jquery。这里你只需要添加可扩展的元素到HTML，逻辑将是一个为他们所有。

现场演示

$('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)');
  }
});

主要思想通过data-attributes设置链接中已切换容器的id。根据这个，你会知道你应该打开或隐藏哪个div。

---

UPD:不使用Jquery也一样:JsFiddle