JSFiddle - React, Tailwind, and code Playground

by Jake

HTML

<div id="clickme">click</div>
<br />
<div id="dir"><ul>
    <li>Fire Dept 784-6789</li>
    <li>Val Halla 784-6789 x3</li>
    <li>Fire Dept 784-6789</li>
    <li>Val Halla 784-6789 x3</li>
    <li>Assessor 513-9887</li>
    <li>Fire Dept 784-6789</li>
    <li>Assessor 513-9887</li>
    <li>Fire Dept 784-6789</li>
    <li>Val Halla 784-6789 x3</li>
    <li>Assessor 513-9887</li>
    </ul>
    <a id="hideDir" href="#">hide directory</a>
</div>

CSS

body { background: navy; 
}

#clickme { height: 1em; width: 25px; color: #fff; cursor: pointer;}

#dir { height: 0px; 
    width: 0px;
    background: black;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    color: #fff;
    font-size: .9em;
    font-weight: bold;
    overflow: hidden;
}
#dir ul { margin: 0 auto; 
}
#dir li {
    width:105px;
    float:left;
    height: 1.3em;
    border-right: 1px solid gray;
    padding: 4px 8px;
}

a#hideDir { color: #fff; margin: 0 auto;
clear: both; display: block}

JavaScript

$('#clickme').click(function() {
    var dir = $('#dir');

  dir.animate({
    width: '100%'
  }, 350, function() {
      dir.animate({
          height: 100
      }, 500);
  });
    
    $('#hideDir').click(function(){
        $('#dir').animate({
     height: 0
   }, 350, function() {
       dir.animate({
          width: 0
      }, 300);
   });
        return false;
    });
    
});