Vue JS: How to show more/less filters in Vue JS

Add "Show more/less" Feature in Aggregations in Vue JS

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!

Tagged under:
#Vue JS #Front-end
Masoom Ul Haq S
About author
Masoom Ul Haq S

Masoom is a Front-end Developer, a UX Engineer and Freelancer based in Bangalore, India. Like to develop differential and effective User Experiences for digital products using an amalgamation of latest technology and best practises.

comments powered by Disqus
You may also like:
Be the first to know about my upcoming writings.