单击div以显示隐藏内容时，在div之间腾出空间

Question

我想要做的是添加功能，如果我点击任何div栏，空格会在它下方打开，以便我看到隐藏的div。单击原始栏将重新隐藏隐藏的div并删除div栏之间的展开空间。

隐藏隐藏的div时，布局如下所示：

单击div栏时，布局会展开，以便在div栏的行之间显示隐藏的div。栏之间的空间扩大，为隐藏的div腾出空间。 （蓝色“隐藏2”）

这不是另一个问题的重复，因为所有其他问题都更加狭窄，并没有解决我想用div实现的功能。

.bar {
  width: 400px;
  height: 30px;
  border: solid 1px #aaa;
  border-radius: 8px;
  padding: 20px;
  font-size: 24px;
  margin: 15px;
  background-color: #ccc;
  z-index: -2;
}

.hidden-data {
  display: none;  
  width: 350px;
  height: 70px;
  border: solid 1px #aaa;
  border-radius: 8px;
  padding: 20px;
  font-size: 24px;
  margin: 15px;
  background-color: #e6eeff;
  z-index: 1;
}

<div class="bar" id="bar1">Bar 1</div>
<div class="hidden-data" id="hidden1">Hidden 1</div>
<div class="bar" id="bar2">Bar 2</div>
<div class="hidden-data" id="hidden2">Hidden 2</div>
<div class="bar" id="bar3">Bar 3</div>
<div class="hidden-data" id="hidden3">Hidden 3</div>
<div class="bar" id="bar4">Bar 4</div>
<div class="hidden-data" id="hidden4">Hidden 4</div>

我见过使用＆lt;的解决方案ul＆gt; ＆LT; li>和使用复选框的解决方案，但我没有使用。 （而且我既不能与我的div一起工作）

我见过使用跨度的解决方案，但那些只支持一行。如果添加多行，则两行都会响应单击。 https://jsfiddle.net/tzfa81cp/73/

我看到了一个使用＆lt;摘要＆gt; ＆LT;详情＆gt;看起来它是我想要的功能的全文本版本，但似乎它可能不被大多数浏览器支持。 （我无法让它与div合作。） http://jsfiddle.net/thurstanh/emtAm/2/

如果有一个CSS解决方案会很棒，但我肯定对JavaScript解决方案持开放态度。我是jQuery的新手

重申一个问题： 我想能够点击Bar 1并在其下方打开一个“Hidden 1”框，将其他div栏向下移动以腾出空间。然后关闭隐藏的div，再次单击Bar 1。 （或点击隐藏div中的x。）

如何做到这一点？

我的代码在这里：
https://codepen.io/Chris_Nielsen/pen/xWNmYy

Answer 1

我已经看到使用Javascript解决此问题的简单方法。从理论上讲，你可以设置div来显示“：hover”（sp？），但我在实践中从未见过它。值得探索吗？

Answer 2

摘要/明细解决方案由于built in functionality而切换 - div没有开箱即用。

jQuery解决方案很简单，例如：

$(function() {
    $(".bar").click(function() {
        $(this).next(".hidden-data").toggle();
    });
});