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

Question

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);
    });
});

Its because you have 2 dots (`..`) in `$("..cnt-text:hidden")` remove 1 of them and it works, next time please look at your console log. — Carsten Løvbo Andersen, Sep 12 '19 at 06:10
Sorry that was a mistake. My intended code doesn't have two dots. It still loads nothing when the page is fully loaded. My intention is to only show 5 contents and then the user will click load more to show another 5 and so on.. — Rudolph Musngi, Sep 12 '19 at 06:10
Well it works just fine in your fiddle, You have to look at the console log and see what error you get — Carsten Løvbo Andersen, Sep 12 '19 at 06:13
@CarstenLøvboAndersen I know it works but my intention is to initially show 5 content and then load another 5 when #loadMore is clicked. It doesn't. It shows nothing at first, and then when you click #loadMore it shows 5. I need it to first show 5, then hide the rest. Also, no console errors — Rudolph Musngi, Sep 12 '19 at 06:14

score 1 · Answer 1 · answered Sep 12 '19 at 06:22

First, please note that your haven't closed your <h1> correct, it should be </h1> not <h1/>

second, you can add $(".cnt-text:not(:hidden)").slideUp().remove();. that should hide those you have already seen.

Demo

var publicSpreadsheetUrl =
  "https://docs.google.com/spreadsheets/d/16m_ntyTklbsyT3OHprGdLa4nu_o4vYK3Ys4COXwpFrc/pubhtml";

function init() {
  Tabletop.init({
    key: publicSpreadsheetUrl,
    callback: showInfo,
    simpleSheet: true
  });
}
window.addEventListener("DOMContentLoaded", init);

function showInfo(data, tabletop) {
  console.log(data);
  for (var i = 0; i < data.length; i++) {
    $(".content").append('<div class="cnt-text">' + data[i].content + "<div>");
  }
  var element = document.getElementById("spinner");
  element.parentNode.removeChild(element);
}

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

.cnt-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.2/tabletop.min.js"></script>
<h1>Content</h1>
<div class="content">

</div>
<a href="#" id="loadMore">Load more</a>

score 0 · Accepted Answer · answered Sep 12 '19 at 07:48

0

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!

answered Sep 12 '19 at 07:48

Rudolph Musngi

165
1
1
7

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

2 Answers2