JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
</ul>

CSS

.more-items {
    cursor: pointer;
}

ul ul {
    display: none;
}

JavaScript

var breakPoint = 5;

$('li:eq(' + breakPoint + ')').before('<li class="more-items">More +</li>');
$('li:gt(' + breakPoint + ')').wrapAll('<ul class="more-items-list" />');

$(function() {}).on('click', '.more-items', function(e) {
    $('.more-items-list').slideToggle();
});