多组Expand collapse button独立控制求助（非jQuery实现）

问题：点击ExapndCollapse1按钮时，ExpandCollapse2对应的内容也会被展开，需要实现点击ExapndCollapse1仅显示data和data1，点击ExpandCollapse2仅显示data2和data3，且不使用jQuery。

问题根源 #

所有折叠元素都使用了同一个全局类名.multi-collapse，按钮的data-target直接指向这个类，导致点击任意按钮都会触发所有该类元素的折叠/展开操作。

解决方案 #

给每组折叠元素分配唯一的标识，让按钮仅控制本组内的折叠内容，以下提供两种实现方式：

方案1：新增专属类名

给每组折叠元素添加独有的类名，让按钮的data-target对应指向该类：

修改后的第一组代码

<div>
  <a data-toggle="collapse" data-target=".multi-collapse-1">
    <i class="fa fa-plus" aria-hidden="false"></i>
  </a>ExapndCollapse1
  <p class="collapse multi-collapse-1">
    data 
  </p>
  <p class="collapse multi-collapse-1" >
     data 1
  </p>
</div>

修改后的第二组代码

<div>
  <a data-toggle="collapse" data-target=".multi-collapse-2">
    <i class="fa fa-plus" aria-hidden="true"></i>
  </a>ExpandCollapse2
  <p class="collapse multi-collapse-2">
      data 2
  </p>
  <p class="collapse multi-collapse-2" >
      data 3
  </p>
</div>

方案2：利用父元素范围限制

给每组外层容器设置唯一ID，让按钮的data-target指向父容器内的.multi-collapse元素，无需新增类名：

修改后的第一组代码

<div id="collapse-group-1">
  <a data-toggle="collapse" data-target="#collapse-group-1 .multi-collapse">
    <i class="fa fa-plus" aria-hidden="false"></i>
  </a>ExapndCollapse1
  <p class="collapse multi-collapse">
    data 
  </p>
  <p class="collapse multi-collapse" >
     data 1
  </p>
</div>

修改后的第二组代码

<div id="collapse-group-2">
  <a data-toggle="collapse" data-target="#collapse-group-2 .multi-collapse">
    <i class="fa fa-plus" aria-hidden="true"></i>
  </a>ExpandCollapse2
  <p class="collapse multi-collapse">
      data 2
  </p>
  <p class="collapse multi-collapse" >
      data 3
  </p>
</div>

以上两种方案均基于Bootstrap原生折叠组件实现，无需额外编写JS/jQuery代码，即可完成分组独立控制的需求。

内容的提问来源于stack exchange，提问作者Sarahrb