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 .5s;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes slideUpFrames {
    0% {
        max-height:60px;
    }
    100% {
        max-height:0px;
    }
}
.slideDown {
    -webkit-animation:slideDownFrames .5s;
    -webkit-animation-fill-mode: forwards;
}
.slidable {
    overflow: hidden;
}
@-webkit-keyframes slideDownFrames {
    0% {
        max-height: 0px;
    }
    100% {
        max-height:60px;
    }
}

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");
});