JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<a href="#" id="button">View More</a>

<a href="#" id="button2">View Even More</a>

<div id='cont'>
    <ul>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        
    </ul>
</div>

CSS

#cont {
    border: 1px solid #000;
    height: 36px;
    overflow:hidden;
}

JavaScript

$('#button').click(function(){
    $('#cont').animate({height:'72px'}, 500);
});

$('#button2').click(function(){
    $('#cont').animate({height: '+=36'}, 500);
});