Add "Show more/less" Feature in Aggregations in Vue JS
In e-commerce sites like Amazon and Flipkart, you might have noticed different groupings like brand, colors, size, etc., These are referred to as filters or aggregation or facets. I will be referring them as filters in my article.
Filters are simply the group of similar items.
In this article, we will cover how to add “Show more/less” functionality to those filters in Vue JS.
One of my colleagues had a task to introduce show more(hide more) functionality in dynamic filters with different limit by value.
- Brands section should show 3 items by default and
- Size section should show 5
It’s easy when we have to implement this on a single filter. But it becomes little complex when you have to do this on dynamic filters.
Simple show/hide more with a single filter
Let’s take it to step by step by creating a simple “show/hide more” feature with a single filter item.
Scenario: We have a list of numbers from “one” to “seven” and we should show 3 by default and on click of “show more” button we should show the whole list and vise Versa.
Dynamic show/hide more with multiple filter
Now let’s take bit complex task by creating a “show/hide more” feature with dynamic filter items.
Scenario: We have a dynamic list of filters with different default limit value. In our case, we have “colors” and “fonts” categories.
- Colors section should show 5 items by default
- Fonts section should show 3 items by default
Here is the whole demo with both the scenarios discussed.
In both scenarios, we require 3 variables:
list- a list of all filter items
default_imit- a default value to show the given number of items by default and also on a toggle
limit_by- to toggle “show/hide more” based on this value
Hope you like this article, share it if you like it!