JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
<li>List Item #4</li>
<li>List Item #5</li>
<li>List Item #6</li>
<li>List Item #7</li>
<li>List Item #8</li>
<li>List Item #9</li>
</ul>

JavaScript

$('ul')
            .find('li:gt(2)')
             .hide()
            .end()
            .append(
                $('<li class="title">Show More!</li>').click( function(){
                $(this).siblings().toggle(500);
                    $(".title").html() === "Show More!"
                        ? $(".title").html("Show Less!")
                        : $(".title").html("Show More!")
                    
                })
            );