JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span class="collapse-list">
    <ul>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
 ...

CSS

body {
    background-color: #eee;
}
div {
    position: relative;

}
.collapse-list ul {
    list-style:none;
    line-height: 26px;
    padding:0;
    border-top: 1px dotted #ccc;
    margin: 0;
    width:100%;
    overflow:hidden;
    max-height:190px;
    -webkit-transition: max-height -2s 3s ease-out;
    transition: max-height -2s 3s ease-out;
}
.collapse-list.collapse ul {
    max-height: 9999px;
    -webkit-transition: max-height 2s ease-in;
    transition: max-height 2s ease-in;
}
.collapse-list li {
    border-bottom: 1px dotted #ccc;
    margin: 0;
    padding: 2px 0;
    width: 20%;
    font-size:14px;
    float:left;
}
.collapse-list .button {
    background-image: -moz-linear-gradient(top, rgba(238,238,238,0), rgba(238,238,238,100));
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(238,238,238,0)),color-stop(1, rgba(238,238,238,100)));
    width: 100%; 
    text-align: center;
    position:absolute;
    padding: 160px 0 0 0;
    bottom:0;
    cursor:pointer;
    color: #666;
}
.collapse-list.collapse .button {
    background-image: none;
}
.collapse-list.collapse .button::after {
    content: "2";
}
.collapse-list .button::after {
    content: "3";
    display: block;
    font-family: "arrowfont";
    font-size: 3em;
    padding: 0;
    width: 100%;
}

JavaScript

$(document).ready(function(){
	$(".button").click(function(){
		$(".collapse-list").toggleClass("collapse");
	});
});