單擊div以顯示隱藏的內容時，在div之間留出空間

Question

我想做的就是添加功能，這樣，如果我單擊任何div欄，它下面的空間就會打開，使我能夠看到隱藏的div。 單擊原始欄將重新隱藏隱藏的div，並刪除div欄之間的擴展空間。

當隱藏的div被隱藏時，布局如下所示：

單擊div欄時，布局將展開，以便在div欄的行之間可見隱藏的div。 條形圖之間的空間會擴大，以便為隱藏的div騰出空間。 （藍色的“隱藏2”）

這不是其他問題的重復，因為所有其他問題都比較狹窄，並且沒有解決我嘗試使用divs實現的功能。

 .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> 

我已經看到使用<ul> <li>的解決方案和使用復選框的解決方案，但是我都沒有使用。 （而且我無法與我的div一起工作）

我見過使用跨度的解決方案，但僅支持一行。 如果添加多個行，則兩行都將響應單擊。 https://jsfiddle.net/tzfa81cp/73/

我看到了一個使用<summary> <details>的解決方案，它看起來像是我想要的功能的純文本版本，但是似乎大多數瀏覽器都不支持它。 （而且我無法使其與div一起使用。） http://jsfiddle.net/thurstanh/emtAm/2/

如果有CSS解決方案，那將是一個很好的選擇，但是絕對可以接受JavaScript解決方案。 我是jQuery新手

重申這個問題：我希望能夠單擊Bar 1，並在其下方打開一個框“ Hidden 1”，將其他div欄向下移動以騰出空間。 然后，要關閉隱藏的div，請再次單擊欄1。 （或點擊隱藏的div中的x）。

如何才能做到這一點？

我的代碼筆在這里：
https://codepen.io/Chris_Nielsen/pen/xWNmYy

Answer 1

我已經看到使用Javascript解決此問題的簡單方法。 從理論上講，您可以將div設置為顯示“：hover”（sp？），但實際上我從未見過。 值得探索嗎？

Answer 2

摘要/詳細信息解決方案由於內置的功能而無法切換-div尚不具備某些功能 。

jQuery解決方案很簡單，例如：

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