title: CSS Expand / Contract Animation to Show/Hide Content
body: <p>I am trying to create a box that can expand and collapse with a simple slide out animation.  If you run the example below, the idea is that it starts with one red line and when you click the button it separates into two read lines and gently expands to reveal the content like pulling a draw out of a table.</p>
  
  <p>I've tried both transform, animation, relative: positioning with top, and i'm unable to get the desired effect.  </p>
  
  <p>The containing box should expand in size</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-js lang-js prettyprint-override"><code>function expandContract() {
     const el = document.getElementById("expand-contract")
     el.classList.toggle('expanded')
     el.classList.toggle('collapsed')
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
     border: 1px solid black;
     padding: 15px;
  }
  
  #top-section {
    border-bottom: 1px solid red;
  }
  
  #expand-contract {
    border-bottom: 1px solid red;
  }
  
  .expand-contract {
     transform: translateY(-100%)
     overflow: hidden;
  }
  
  @keyframes slide-in {
      100% {
          transform: translateY(0%)
      }
  }
  
  .expanded {
     background-color: green;
     animation-name: slide-in;
     animation-duration: 1s;
  }
  
  .collapsed {
     background-color: red;
     transform: translateY(-100%)
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="top-section"&gt;
      This is always displayed
    &lt;/div&gt;
    
    &lt;div id="expand-contract" class="expanded"&gt;
      This section expands and contracts
    
      &lt;table&gt;
        &lt;tr&gt;&lt;td&gt;test1&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;test2&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;test3&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;test4&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    
    &lt;div id="bottom-section"&gt;
      This section is always displayed
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button onclick="expandContract()"&gt;Expand/Contract&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>