view all products in un click JQuery

The goal is to create a ‘View all’ button under the product sheets which, when clicked, adds clones of the latter at the bottom of the page, filling all available spaces.
–> when i click a button “view all”, i want to see all the list of the products in alphabetical order. Can you help me to move on!!

ABC.plp = {
    _autoload: [

    viewAll: function() {
        $(".plp-products-container").ready(function() {
            $(".button-row [name=viewALL]").click(function() {

           $(".button-row [name=viewALL]").click(function() {

Thank you


First you need to hide all the product items and then use slice method to show the matching elements. The slice method accepts index (start & end). Read more here –

$( ".product-item" ).hide();
$( ".product-item" ).slice( 6, 10 ).show();

To show all product items on click of button you would do the below.

   $( ".product-item" ).show();

To make the button toggle as View All / View Less you would do

   let btnText = $(this).text().toLowerCase();
   if (btnText === 'view all') {
      $(this).text('View Less');
      $( ".product-item" ).show();
   } else if (btnText === 'view less') {
      $(this).text('View All');
      $( ".product-item").not($( ".product-item").slice( 6, 10 )).hide();

JS Fiddle –

In the case of sorting in alphabetical order, it is better to sort the data in your controller before you print it in the html.