title: JavaScript / CSS hover function
body: <p>Would it be possible to create something like what I have in the code below with just vanilla JavaScript or CSS? I also want it to have the hover div stay open until a button click, which would then slide the original div back down.  Anything helps, cheers!</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>$(document).ready(function(){
      $('.up-down').mouseover(function(){
          $('.default').stop().animate({
              height: 0    
          }, 200);                        
      }).mouseout(function(){
          $('.default').stop().animate({
              height: 200 
          }, 200)    
      })
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.up-down {
      overflow:hidden;
      height:200px;
      width:200px;
  }
  .slide {
      width:200px;
      height:200px;
  }
  .default {
      background-color:#ccc;
  }
  .onhover {
      background-color:#1DB7CB;
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="up-down"&gt;
  &lt;div class="slide default"&gt;&lt;/div&gt;
  &lt;div class="slide onhover"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>