JSFiddle - React, Tailwind, and code Playground

HTML

<span>Press Play</span>
<div class = "test">
    <ul>
        <li>Hello 1</li>
        <li>Hello 2</li>
        <li>Hello 3</li>
        <li>Hello 4</li>
        <li>Hello 5</li>
        <li>Hello 6</li>
    </ul>
</div>

CSS

span{cursor:pointer;}
div{height:0px;overflow:hidden;}

JavaScript

$("span").click(function () {
    if (!$('div').hasClass('active')) {
        $("div").stop().animate({ height: "360px" }).addClass('active');    
    } else {
        $("div").animate({ height: "0px" }).removeClass('active');
    }
});