title: Make room between divs when clicking a div to show hidden content
body: <p>What I want to do is add functionality such that if I click any div bar, space opens up below it to allow me to see a hidden div. Clicking the original bar will re-hide the hidden div and remove the expanded space between the div bars. </p>
  
  <p>When the hidden divs are hidden the layout looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/bIoaU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bIoaU.png" alt="before clicking a div"></a></p>
  
  <p>When a div bar is clicked, the layout expands so that the hidden div is visible between the rows of div bars. The space between the bars expands to make room for the hidden div. (Blue "Hidden 2")</p>
  
  <p><a href="https://i.stack.imgur.com/3FJlv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3FJlv.png" alt="Hidden 2 shown when clicking Bar 2"></a></p>
  
  <p>This is not a duplicate of another question out there because all of the other questions were more narrow and do not address the functionality I am trying to achieve with divs.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bar" id="bar1"&gt;Bar 1&lt;/div&gt;
  &lt;div class="hidden-data" id="hidden1"&gt;Hidden 1&lt;/div&gt;
  &lt;div class="bar" id="bar2"&gt;Bar 2&lt;/div&gt;
  &lt;div class="hidden-data" id="hidden2"&gt;Hidden 2&lt;/div&gt;
  &lt;div class="bar" id="bar3"&gt;Bar 3&lt;/div&gt;
  &lt;div class="hidden-data" id="hidden3"&gt;Hidden 3&lt;/div&gt;
  &lt;div class="bar" id="bar4"&gt;Bar 4&lt;/div&gt;
  &lt;div class="hidden-data" id="hidden4"&gt;Hidden 4&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have seen solutions that use &lt; ul > &lt; li > and solutions that use checkboxes, but I am using neither. (And I could get neither to work with my divs)</p>
  
  <p>I have seen solutions that use spans, but those only support one row. If you add more than one row, then both rows respond to the click.
  <a href="https://jsfiddle.net/tzfa81cp/73/" rel="nofollow noreferrer">https://jsfiddle.net/tzfa81cp/73/</a></p>
  
  <p>I saw a solution that uses &lt; summary > &lt; details > which looks like it is an all text version of the functionality I want, but this seems like it may not be supported by most browsers. (And I couldn't get it to work with divs.)
  <a href="http://jsfiddle.net/thurstanh/emtAm/2/" rel="nofollow noreferrer">http://jsfiddle.net/thurstanh/emtAm/2/</a></p>
  
  <p>A CSS solution would be great if there is one, but am definitely open to a JavaScript solution. I am new to jQuery </p>
  
  <p>To reiterate the question:
  I want to be able to click Bar 1 and have a box "Hidden 1" open below it, moving the other div bars down to make room. Then to close the hidden div, I click Bar 1 again. (or click an x in the hidden div).</p>
  
  <p>How can this be done?</p>
  
  <p>My codepen is here:<br>
  <a href="https://codepen.io/Chris_Nielsen/pen/xWNmYy" rel="nofollow noreferrer">https://codepen.io/Chris_Nielsen/pen/xWNmYy</a></p>