Make items visible with button

Question

I have this javascript code:

function newsOverview() {
    $(".list-news li:gt(3)").hide();
    $(".box-news .btn-1").on('click', function(e){
        e.preventDefault;
        $(".list-news li:visible:last").nextAll(":lt(4)").fadeIn(600);
    });
};

I have a big list with li items. This script is showing every time 4 li items. When you clicking on the btn-1 button. But now i have a question with this script.

• Why the e.preventDefault is not working? When i clicking the button. I scrolling back to the top of the page. Why does that is not working?
• And, Is it possible. When all items are visible. That the button disappears.

Answer 1

1) preventDefault is not working because it's a function. It should be like follows:

e.preventDefault();

2) To see if all items are visible, try to use the following code:

if ($(".list-news li:hidden").lehgth == 0) {
   $(".box-news .btn-1").hide();
}

Answer 2

Why the e.preventDefault is not working?

You're missing the parenthesis in order to actually call preventDefault:

function newsOverview() {
    $(".list-news li:gt(3)").hide();
    $(".box-news .btn-1").on('click', function(e){
        e.preventDefault(); // don't forget those
        $(".list-news li:visible:last").nextAll(":lt(4)").fadeIn(600);
    });
};

And, Is it possible. When all items are visible. That the button disappears.

My jQuery is a little bit rusty, but something like this should work:

function newsOverview() {
    $(".list-news li:gt(3)").hide();
    $(".box-news .btn-1").on('click', function(e){
        e.preventDefault();
        if($(".list-news li:hidden").length === 0)
            $(this).hide();
        else
            $(".list-news li:visible:last").nextAll(":lt(4)").fadeIn(600);
    });
};

Answer 3

e.preventdefault(); not working

and, you always can use "return false;" on button, i think.