jQuery functionality to load first 5 elements & click "load more" to display next 5 elements.

HTML:

1. <ul id="myList">
2.     <li>One</li>
3.     <li>Two</li>
4.     <li>Three</li>
5.     <li>Four</li>
6.     <li>Five</li>
7.     <li>Six</li>
8.     <li>Seven</li>
9.     <li>Eight</li>
10.     <li>Nine</li>
11.     <li>Ten</li>
12.     <li>Eleven</li>
13.     <li>Twelve</li>
14.     <li>Thirteen</li>
15.     <li>Fourteen</li>
16.     <li>Fifteen</li>
17.     <li>Sixteen</li>
18.     <li>Seventeen</li>
19.     <li>Eighteen</li>
20.     <li>Nineteen</li>
21.     <li>Twenty one</li>
22.     <li>Twenty two</li>
23.     <li>Twenty three</li>
24.     <li>Twenty four</li>
25.     <li>Twenty five</li>
26. </ul>
27. <div id="loadMore">Load more</div>
28. <div id="showLess">Show less</div>

CSS:

1. #myList li{
2.     display:none;
3. }
4. #loadMore {
5.     color:green;
6.     cursor:pointer;
7. }
8. #loadMore:hover {
9.     color:black;
10. }
11. #showLess {
12.     color:red;
13.     cursor:pointer;
14. }
15. #showLess:hover {
16.     color:black;
17. }

jQuery:

1. $(document).ready(function () {
2.     size_li = $("#myList li").size();
3.     x=3;
4.     $('#myList li:lt('+x+')').show();
5. });
6. $('#loadMore').click(function () {
7.         x= (x+5 <= size_li) ? x+5 : size_li;
8.         $('#myList li:lt('+x+')').show();
9. });
10. $('#showLess').click(function () {
11.     x=(x-5<0) ? 3 : x-5;
12.     $('#myList li').not(':lt('+x+')').hide();
13. });

Reference: StackOverflow   jsfiddle