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.

Vue JS is an opensource, component-based javascript framework and one of the top 3 javascript frameworks as well.

Overview

One of my colleagues had a task to introduce show more(hide more) functionality in dynamic filters with different limit by value.

Example:

• 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.

Example snippet:

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

Example snippet:

Demo

Here is the whole demo with both the scenarios discussed.

Conclusion

In both scenarios, we require 3 variables:

1. list - a list of all filter items
2. default_imit - a default value to show the given number of items by default and also on a toggle
3. limit_by - to toggle “show/hide more” based on this value

Hope you like this article, share it if you like it!