JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<ul id="list">
 <li><a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Consectetur adipiscing elit
  </a>
 </li>
 <li >
  <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
</ul>

JavaScript

var more = $('<li><a class="more" href="">Show more</a></li>');
var less = $('<li><a class="less" href="">Show less</a></li>');

//$('ul#list').children('li:gt(2)').hide();
$('ul#list').children('li:gt(2)').hide();
$('ul#list').append(more);


$('.more').click(function(){
     $('ul#list').siblings('li').show();
     $('ul#list').append(less);
    return false;
});

$('.less').click(function(){
     $('ul#list').children('li:gt(2)').hide();
     $('ul#list').append(less); 
    return false;
});