使用 HTML 在同一页面内创建多个扩展块答案

【问题标题】：Create multiple expanding blocks within the same page using HTML使用 HTML 在同一页面内创建多个扩展块
【发布时间】：2016-11-03 20:01:37
【问题描述】：

因此，我需要创建一个包含多个部分的页面，这些部分可以相互独立地展开和折叠。不久前我进行了研究，并能够“开发”此功能：

<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 个时，这一切都很好。现在我正在做一个项目，其中添加了一些小简历，我在一个页面上查看其中的 45 个。一定有别的方法吧？有没有更好的方法来做我正在做的事情？

【问题讨论】：

看一下 Bootstrap - this 可能就是你要找的。span>

标签： html menu expandable

【解决方案1】：

现在我将提供一种解决方案，但使用 jquery。在这里你只需要在 HTML 中添加可扩展的元素，逻辑就是其中之一。

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

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

UPD：没有 Jquery 时相同：JsFiddle

【讨论】：