Search code examples
javascriptjquerytabletop.js

JQuery Load More button doesn't show the content it intends to show

I'm using tabletop.js to pull content from a spreadsheet to my web page, and then try to hide part of the content using jQuery to improve user experience. However, the load more button doesn't show the intended content I needed to show first. It hides everything.

Here is my code. Please take a look.

https://codepen.io/ru-musngi/pen/YzKLdLG

$(function () {
    $(".cnt-text").slice(0, 5).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $(".cnt-text:hidden").slice(0, 5).slideDown();
        if ($(".cnt-text:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});
Solution

  • Thanks for all your answers.

    I figured out something on my own.

    IN the CSS, I just used :nth-child(n+6) to display the first five results!