$(document).ready(function () { // Load the first 3 list items from another HTML file //$('#myList').load('externalList.html li:lt(3)'); $('#myList li:lt(3)').show(); $('#showLess').hide(); var items = 25; var shown = 3; $('#loadMore').click(function () { $('#showLess').show(); shown = $('#myList li:visible').size()+5; if(shown< items) {$('#myList li:lt('+shown+')').slideDown();} else {$('#myList li:lt('+items+')').slideDown(); $('#loadMore').slideUp(); } }); $('#showLess').click(function () { $('#myList li').not(':lt(3)').slideUp(); }); });
<ul id="myList"> <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> <li>Eleven</li> <li>Twelve</li> <li>Thirteen</li> <li>Fourteen</li> <li>Fifteen</li> <li>Sixteen</li> <li>Seventeen</li> <li>Eighteen</li> <li>Nineteen</li> <li>Twenty one</li> <li>Twenty two</li> <li>Twenty three</li> <li>Twenty four</li> <li>Twenty five</li> </ul> <div id="loadMore">Load more</div> <div id="showLess">Show less</div>
#myList li{ display:none; } #loadMore { color:green; cursor:pointer; } #loadMore:hover { color:black; } #showLess { color:red; cursor:pointer; } #showLess:hover { color:black; }