Skip to content

Instantly share code, notes, and snippets.

@nocodesupplyco
Created December 19, 2022 16:49
Show Gist options
  • Save nocodesupplyco/40dc64d5b672dd669a86de9aaf44dbe0 to your computer and use it in GitHub Desktop.
Save nocodesupplyco/40dc64d5b672dd669a86de9aaf44dbe0 to your computer and use it in GitHub Desktop.
View All or Show Less List Pagination
//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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment