JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<ul id="datalist">
<li>dataset1</li>
<li>dataset1</li>
<li>dataset2</li>
<li>dataset2</li>
<li>dataset3</li>
<li>dataset3</li>
<li>dataset4</li>
<li>dataset4</li>
<li>dataset5</li>
<li>dataset5</li>
<ul>
    <span>readmore</span>

CSS

ul li:nth-child(n+3) {
    display:none;
}

ul li {
 border: 1px solid #aaa;   
}

span {
    cursor: pointer;
color: #f00;                
}

JavaScript

$( function() {
    $( 'span' ).click( function() {
        $( '#datalist li:hidden' ).show();
        if( $( '#datalist li' ).length == $( '#datalist li:visible' ).length ) {
$( 'span ' ).hide();                
  }
    } );
} );