JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="slidable">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

<button id="down">Slide down</button>
<button id="up">Slide up</button>

CSS

.slideUp{
            -webkit-animation:slideUpFrames 1s;
            -webkit-animation-fill-mode: forwards;
        }

        @-webkit-keyframes slideUpFrames{
          0%{
            max-height:1000px;
          }

          100%{
            max-height:0px;
          }
        }

        .slideDown{
              -webkit-animation:slideDownFrames 1s;
              -webkit-animation-fill-mode: forwards;
        }

        .slidable{
            overflow: hidden;
        }

        @-webkit-keyframes slideDownFrames{
          0%{
            max-height: 0px;
          }

          100%{
            max-height:1000px;
          }
        }

JavaScript

$("#down").click(function(){
   $("ul")[0].classList.remove("slideUp"); 
   $("ul")[0].classList.add("slideDown"); 
});

$("#up").click(function(){
   $("ul")[0].classList.remove("slideDown"); 
   $("ul")[0].classList.add("slideUp"); 
});