JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
  <li>li item</li>
</ul>

JavaScript

var el = $('ul');

		$(el)
		  .find('li:gt(9)')
		  .hide()
		  .parent()
		  .append(
		    $('<li>more</li>').on('click', function() {
		      var items = $(this).siblings(':hidden');

		      if (items.length) items.slice(0, 10).show();
		      else $(el).find('li:gt(9)').not(this).hide();

		      $(this).text($(this).siblings(':hidden').length ? 'more' : 'less');
		    })
		  );