On Click hide all elements except of the first 4


In the following script, each time you click the button it shows 4 more elements:

Load 4 more elements

I need to change the script so that when all elements are visible and you click again the button, all elements get hidden except of the first 4 elements.

I tried for hours but couldn’t find any solution. Could you please help me?


Maybe something like this:

$(function() {
    var isComplete = false;
    $("div").slice(0, 4).show();
    $("#loadMore").on('click', function(e) {

        if (isComplete === true) {
            isComplete = false;
            $("#loadMore").text('Load More');
        $("div:hidden").slice(0, 4).slideDown();

        if ($("div:hidden").length == 0) {
            $("#loadMore").text('Load only the first 4');
            isComplete = true;

            scrollTop: $(this).offset().top
        }, 1500);

I’m sure that code could be reduced but is easier to follow.


Thanks a lot mate.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.