Code

View All/Show Less Pagination List

This allows you to create a view all/show less on your Webflow's pagination collection list via a simple Javascript code snippet. Toggles the height of each item multiplied by the number of items you want to show.

How to add it

Add the custom Javascript snippet to the closing body tag.
Set the wrapper of the collection list to overflow:hidden
Update relevant class IDs and create the relevant button section

The code

Javascript

                      //------------- View all or less items ---------------------

<script>
    //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();
    }
</script>