JSFiddle - React, Tailwind, and code Playground

by iamacatperson

HTML

<div id="wrapper">
    
    <ul>    
        <li>&gt; This is the first in the list</li>
        <li>&gt; This is the 2nd in the list</li>
        <li>&gt; This is the others in the list</li>
        <li>&gt; This is the others in the list</li>
        <li>&gt; This is the others in the list</li>
        <li>&gt; This is the others in the list</li>
    </ul>
    
</div>

CSS

p { font: 12px Arial, Helvetica, sans-serif; }

#wrapper {
    margin: 70px 0 0 70px;
}

ul {
    background: #CCF;
    padding: 10px;
    width: 300px;
}

li {
    margin-left: 20px;
    list-style: none;
}

JavaScript

$('#wrapper').append("<a href='#' class='show'>Show more</a>");
$('ul li:not(:first)').hide();

$('.show').toggle(function() {
    $('ul li').animate({
        'height': 'show'
    }, 300);
    $('.show').text("Show less");
}, function() {
    $('ul li:not(:first)').animate({
        'height': 'hide'
    }, 300);
    $('.show').text("Show more");
});