Browse through all products with just one click using JQuery!

I am trying to achieve a feature where clicking a 'View all' button under the product sheets will display all the products in alphabetical order by adding clones at the bottom of the page to fill all available spaces. Can you assist me with this? https://jsfiddle.net/oj20rwk3/ 

ABC.plp = {
    _autoload: [
        "viewAll"
    ],

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

           $(".button-row [name=viewALL]").click(function() {
                $(".product-item").hide();
           });
        });
    },

Thank you

javascripthtmljquerycss

Answer №1

To begin, hide all product items, then utilize the slice method to display the matching elements. Specify the index (start & end) for slicing. For more information, check out https://api.jquery.com/slice/

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

To display all product items upon clicking a button, use the following code.

$('button[name=viewALL]').click(function(){
   $( ".product-item" ).show();
});

To toggle the button between View All and View Less, implement the following solution

$('button[name=viewALL]').click(function(){
   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();
   }
});

Check out the JS Fiddle for a practical example - https://jsfiddle.net/pdj03sbo/

If you need to sort items alphabetically, consider sorting the data in your controller before rendering it in the HTML.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing Cross-Origin Resource Sharing (CORS) authentication on Internet Explorer with

I have a myriad of inquiries that I could potentially pose, but let's kick things off with this one that has been persistently nagging at me. In my setup, I have a development environment within the intranet zone and a web service in the internet zon ...

jqueryajaxinternet-explorercorsbasic-authentication

Navigating through the Jquery DOM to access a specific node

Displayed here are a list of products, presented within an unordered list: Users can express interest in specific items by clicking "I am Interested," prompting a change in background color and the appearance of a tick mark next to the selected item. To ...

javascriptjqueryhtml

What is the best way to require users to click one of the toggle buttons in a form?

Is it possible to require the user to click one of the toggle buttons in a React form? I want to display an error if the user tries to submit the form without selecting a button. Even though I tried using "required" in the form, it didn't work as expe ...

javascriptnode.jsreactjsreact-hooks

Does anyone else have trouble with the Smtp settings and connection on Servage.net? It's driving me crazy, I can't figure it out!

Whenever I attempt to connect to send a servage SMTP, it gives me this error message: SMTP connect() failed. I have tried using the following settings: include('res/mailer/class.phpmailer.php'); $mail->SMTPDebug = 2; include('res/mai ...

javascriptphpcssemailsmtp

Website loses its css after printing

I'm having trouble printing a website with a simple layout featuring two columns, each containing tables. The website I want to print is located at the following link: . However, when I try to print it using the JavaScript function window.print(), the ...

javascripthtmlcssprinting

Issue with Angular JS: ng-model does not update when input value is changed using jQuery

As a newcomer to AngularJS, I am currently working on creating a directive that consists of a list of input fields. The goal is for the "done" function to be triggered when the comma key (which corresponds to the number 188 in the plunker) is pressed, resu ...

jqueryangularjsangularjs-directive

What is the best way to overlook content-encoding?

I am in need of downloading a file from a device. Sometimes, the file might have an incorrect content-encoding, specifically being encoded as "gzip" when it is not actually compressed in any way. When the file is properly gzipped, retrieving the content u ...

javascriptajaxcontent-encoding

Having trouble with a Vue3 project after running a Vite build in production mode?

When I run my project in development mode, everything works perfectly fine. However, when I build the project using `vite build´, some components stop functioning. Oddly enough, there are no errors displayed in the console or in the build logs. If I use ...

javascriptvue.jsvite

Tips for sending a parameter to a URL from a controller using AngularJS

I am currently working on a feature where I need to combine adding and editing functionalities on one page. The items are listed in a table below, and when the edit button is clicked, I want to pass the ID of that specific item in the URL. This way, if the ...

javascriptangularjs

Determining the position of the selected option in an Angular 2 Select menu

Is there a way to retrieve the position of the selected option in a similar manner to the index of a table? Example for a table: <tr *ngFor="let car of cars; let i = index" (click)="showTabs(i)"> <td>{{i+1}}</td> </tr> I am lo ...

htmlangular

Eliminating the glow effect, border, and both vertical and horizontal scrollbars from a textarea

Dealing with the textarea element has been a struggle for me. Despite adding decorations, I am still facing issues with it. The glow and border just won't disappear, which is quite frustrating. Could it be because of the form-control class? When I rem ...

javascriptjqueryhtmlcss

What is the best way to showcase a modal component when the page loads?

Currently, I am working on an HTML5 game page and I am looking to create a modal login form that appears when the user first loads the page. I have attempted to set the state to true and even tried transferring the state to app.js, but unfortunately, neith ...

javascriptreactjsbootstrap-modal

How can I restrict the selection of only one checkbox within an iframe window?

Here is my JavaScript snippet: var iframe = document.getElementById('pltc'); iframe.contentWindow.document.open('text/htmlreplace'); iframe.contentWindow.document.write('<input type="checkbox" name="tc0">Yes<input type="c ...

javascriptjqueryhtmliframe

Unable to access the jcrop object in order to release it using ajax with jQuery

Hello everybody, I've been struggling with this issue for the past 3 hours and I can't seem to find a solution XD. I have an ajax upload that successfully opens a Twitter Bootstrap modal window upon completion, loads the image, initializes the j ...

jqueryajaxjcrop

React: issue with updating state object property

I am encountering an issue while trying to update my state. When I check the updated state value in the console, it shows that the state value is undefined. Can someone please assist me in resolving this problem? I am utilizing the rc-time-picker to select ...

javascriptreactjsecmascript-6

Node.js application - varying NODE_ENV upon NPM launch

Operating my node.js application can be quite confusing. When launched by npm start, it operates in "production" mode, whereas when launched using node start.js, it runs in 'development' mode. I want to ensure that the 'development' mo ...

javascriptnode.jsnpm

Finding specific data with MongoDB's query syntax

I am working with a mongoDB "users" collection in JSON format. My objective is to retrieve all the data where privacy is set to true. How can I accomplish this? { "name" : "Maria Kari", "social" : [ { "facebook" : "www.fb.com/ ...

javascriptnode.jsmongodbmongodb-query

What is preventing the Selenium WebDriver from clicking on elements, despite their presence and focus?

Once again, I am facing a Selenium issue. Last week everything was running smoothly, but today when I attempted to write some new tests, I encountered a strange problem. Every time I try to click on something, Selenium seems to ignore the click. Even wit ...

javahtmlselenium

What is the best way to create a code block with a specific width in mind?

I'm currently working on a documentation website and I'm facing an issue with my code blocks. I can't seem to set a specific width for them; instead, the width is determined by the text content they contain. What I really want is for the co ...

htmlcsswidthinlinestyling

What is the process for accessing an image via localhost on the same computer?

I created a program that saves images locally and stores their URLs in a database. When retrieving this data via ajax, the URLs are fetched and appended to a div class using the following code: $( document ).ready(function() { $.ajax({ url: "/ ...

jqueryhtmlimage