[jquery] jQuery load first 3 elements, click "load more" to display next 5 elements

The expression $(document).ready(function() deprecated in jQuery3.

See working fiddle with jQuery 3 here

Take into account I didn't include the showless button.

Here's the code:

JS

$(function () {
    x=3;
    $('#myList li').slice(0, 3).show();
    $('#loadMore').on('click', function (e) {
        e.preventDefault();
        x = x+5;
        $('#myList li').slice(0, x).slideDown();
    });
});

CSS

#myList li{display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to load

jQuery load first 3 elements, click "load more" to display next 5 elements Javascript: Load an Image from url and display Selenium wait until document is ready Calculating Page Load Time In JavaScript File loading by getClass().getResource() How do I load an url in iframe with Jquery Can I get JSON to load into an OrderedDict? changing source on html5 video tag Load content of a div on another page JavaScript load a page on button click

Examples related to html-lists

How to markdown nested list items in Bitbucket? how do I get the bullet points of a <ul> to center with the text? Is there a way to make numbers in an ordered list bold? How to center an unordered list? How do I set vertical space between list items? Removing "bullets" from unordered list <ul> jQuery load first 3 elements, click "load more" to display next 5 elements How can I disable a specific LI element inside a UL? UL has margin on the left How to display an unordered list in two columns?