View All or Show Less List Pagination

view-all-show-less.js

//when load/resize get and set overflow height based on card height
$(window).on("load resize", function (e) {
  var cardHeight = $(".list-item").height();
  var lessRows = cardHeight * 21; //number of rows on load

  $(".list-overflow").height(lessRows);
  $(".list-overflow_anchor").css("bottom", cardHeight);
});

//get and set the number of items in the list to the button
$(function () {
  var cardCount = $(".list-item").length;
  $(".btn-text_view-count").text(cardCount);
});

//when clicking the view all/less button
$("#btn-viewall").on("click touchend", function (e) {
  e.preventDefault();

  if ($(".list-overflow").hasClass("view-full-list")) {
    viewLess();
    $("html, body").animate(
      {
        scrollTop: $("#less").offset().top,
      },
      0
    );
  } else {
    viewAll();
  }
});

//what should happen when in the show less mode
function viewLess() {
  $(".list-overflow").removeClass("view-full-list");
  $(".btn-text_view-all").show();
  $(".btn-icon.cc-view-all").show();
  $(".btn-text_view-less").hide();
  $(".btn-icon.cc-view-less").hide();
}

//what should happen when in the view all mode
function viewAll() {
  $(".list-overflow").addClass("view-full-list");
  $(".btn-text_view-all").hide();
  $(".btn-icon.cc-view-all").hide();
  $(".btn-text_view-less").show();
  $(".btn-icon.cc-view-less").show();
}