image

image

Source

Blog

Announcements, tips, tricks and much more!

image

Filtering grid items


| 08 Dec 2020


Grid Plus includes the option to activate a powerful (and CSS only) filter. We can even activate the filter via the url!

This makes it a really effective and lightweight approach to add useful interactivity to the page and allowing users to filter out information that they don't need to see.

To set up a grid filter

  1. enable it in the Grid Plus stack
  2. add in details of all the different categories (giving each a label and a value)
  3. add the relevant category (or categories) to each individual grid item (see image below)
grid-filter

Examples

I have used this in numerous projects. A couple of particularly good examples are:

Bonus tip: Filtering via the url!

By adding just a couple of lines of javascript to the page we can allow for the grid to be filtered on page load by passing in a url parameter. For example we could show all grid items that match the category 'blue' by adding the following to our url: ?category=blue.

The code that we need to add (to the Javascript tab of the page inspector in RW) is:

var urlParams = new URLSearchParams(window.location.search);
if(document.location.search.length) {
document.getElementById(urlParams.get('category')).checked = true;
}

This is a really useful approach if you want to link to particular categories from a different page to where the grid it on.


Like this post?

Why not share with others that might like it too?!

Next post

Post title - will change!

Filtering grid items

Categories


Tags


RapidWeaver Icon

Made in RapidWeaver