On Click hide all elements except of the first 4

[kayut]

Hi,

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?

Thanks

[PaulOB]

Maybe something like this:

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

        if (isComplete === true) {
            $("div").hide();
            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;
        }

        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

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

[itsthomas]

Thanks a lot mate.