title: Vertical divs that expand and contract on click
body: <p>My goal is to have five or so divs inside a parent div. When a div is clicked it should expand over the other divs.  What confuses me is how to get said div to expand above the other divs so when the reset/back/close button is clicked all of the divs are shown once again. </p>
  
  <p>When hovered, the div should expand slightly.</p>
  
  <p>The parent container is 1900 by 500. </p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.one {
    height: 100%;
    width: 20%;
    background-color: #ffccaa;
    float: left;
  }
  .two {
    height: 100%;
    width: 20%;
    background-color: #ffffcc;
    float: left;
  }
  .three {
    height: 100%;
    width: 20%;
    background-color: #aabbcc;
    float: left;
  }
  .four {
    height: 100%;
    width: 20%;
    background-color: #cccccc;
    float: left;
  }
  .five {
    height: 100%;
    width: 20%;
    background-color: #ff11bb;
    float: left;
  }
  
  * {margin: 0; padding: 0;}
  .header {height: 50vh; width: 100vw; background-color: #000;}
  .navi {height: 100px; width: 100%; background-color: #fccaab; margin-top: 5px;}
  .logo {height: 100%; width: 500px; background-color: #ccc; align:center; margin: auto;}
  .content {height: auto; width: 100%; background-color: #ccffca; margin-top: 5px;}
  .footer {height: 10vh; width: 100%; background-color: #abcdef; margin-top: 5px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link type="text/css" rel="stylesheet" href="css/file.css" /&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;       
      &lt;/head&gt;
      
      &lt;body&gt;
          &lt;div class="header"&gt;
              &lt;div class="one"&gt;&lt;/div&gt;
              &lt;div class="two"&gt;&lt;/div&gt;
              &lt;div class="three"&gt;&lt;/div&gt;
              &lt;div class="four"&gt;&lt;/div&gt;
              &lt;div class="five"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="navi"&gt;
              &lt;div class="logo"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
              
          &lt;/div&gt;
          
          &lt;div class="footer"&gt;
          
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>