image

image

Content Filter

Selectively show and hide content

Show or hide any content on your page via buttons or the url

Endless flexibility

Filter stack allows you to categorise page content and then show or hide that content based on choices made by your site visitors.
Filter stack uses CSS only to filter the content!
That's right. There is zero javascript/jQuery required* meaning this is a truly lightweight option to add some seriously powerful functionality to your web pages!

* Filtering via a url parameter (if enabled) uses a tiny snippet of javascript!


Examples

Defaults

You tag your added content with the relevant values (usually using the supplied Filter Content stack) and then, when the filter is activated by the user, anything that doesn't match the selected value is hidden! Here is what things look like with the default settings...

image
Soccer

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


soccer
image
Tennis

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


tennis
image
Basketball

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


basketball

Tab interaction

How you style the buttons is completely customisable. Enabling you to build things like your own tab-style interactions.

My Blue content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

blue
My Purple content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

purple
My Light Blue content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

lblue

Here we have enabled the option to hide the 'All' button and have set 'Blue' to be the starting category instead.

Payment options

You often see interactions like this where the user can select to see monthly or annual payment options.

Save 20%
annual
Starter
$100 / month
month
$80 / month
Paid annually
annual

10 user accounts


300 transactions per month


1000 emails per month


Business hours support

Save 20%
annual
Pro
$200 / month
month
$160 / month
Paid annually
annual

20 user accounts


1000 transactions per month


Unlimited emails per month


24/7 support line


Discounts store-wide

Good choice. You save 20% with an annual payment!

annual

In this example most of the content remains the same but a couple of elements are switched out depending on what value is currently selected.

Grid format

Filter stack includes built-in support for powerful grid displays of your filterable content. Great for products or images or anything!

image

Box shelving

decor
image

Lights array

lightssocial
image

Ball lights

lightsdecor
image

Flower layout

flower
image

Flowers

flower
image

Flowers

flower
image

Bed space

decor
image

Plant pot

decor
image

String lights

lights
image

Cafe life

social

This example uses our dynamic grid which adjusts the amount of columns depending on the amount of items. Change to the different categories to see how the column widths change!

Also in this example we have enabled the option to display the category tags.

There is also the option to use a regular fixed grid where you specify how many columns you want to display at each breakpoint.

Page content

What about filtering content across a large part of the page (or the whole page!)? This can be great to have the page content switch focus onto particular interest areas! You can easily incorporate general content sections as well as category-specific content.


What kind of vehicle are you specifically interested in?
Pick from the options below
car

Car content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

cars
bicycle

Bike content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

bikes
fishing-boat

Boat content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

boats

Generic content

This content doesn't get switched out. It remains in place regardless of the filter selected.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

More car content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

cars

More bike content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Some extra bike content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

bikes

More boat content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

boats

More generic content

This content doesn't get switched out. It remains in place regardless of the filter selected.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Ready to buy a boat?
boats
Ready to buy a car?
cars
Ready to buy a bike?
bikes

We are using the filter buttons here but this kind of thing also works well by setting the filter category via the url - e.g from a button on another page etc. Try that just now by clicking the following link to see the category filter change to 'Boats': ?vehicle=boats.


Get Filter

You can get this stack on its own or as part of our hugely discounted stacks bundle.

Our stacks bundle includes Filter and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:

  • Easy Grid
  • Content Filter
  • Grid Enabler
  • Magic Mouse
  • Magic Mouse 2
  • Markdown Link
  • Parallaxer
  • Scroller Plus
  • Source Addons
  • Splider 2


New!

image

Content Filter

Powerful (CSS only!) content filter to selectively show and hide page content

Buy for

usd

Buy for

eur

Buy for

gbp

Over 60% off!

image

Stacks bundle

Our stacks bundle includes ALL of our stacks in one incredible bundle deal!

Buy for

usd

Buy for

eur

Buy for

gbp

FAQs

Below are some of the most common questions about this and our other stacks.

Stack FAQs

Yes - you can set Filter up to work with Feeds stack (from Weavers Space). That will let you generate all of the filter items (in a grid or free style) from an external source like a csv file or a database etc and have Filter stack enable that content to be selectively displayed.

It does but it cannot do half as much as this dedicated stack can do. It lets you filter items in a single grid. Filter stack allows you to filter any content and use as many Filter stacks on one page as you like. It also has far more extensive styling controls.

The main limitations of the stack are that Each Filter stack can handle up to 10 categories (which should be more than enough for most use cases). In addition the filters can only be applied individually - i.e. you cannot filter on X and Y category.


General FAQs

Yes this stack has been designed to work in any framework. If you encounter any issues then please contact us with an example and we will do our best to resolve.

All our stacks use only local resources, collect no data and include no calls to remote servers or CDNs etc. As such the stacks are completely GDPR compliant.

We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can’t find what you need there then do not hesitate to reach out to us via your preferred channel.

The whole site has been built with Source micro framework. In addition, this page also uses (obviously). Finally, this FAQ section has been built with Toggle stack and the Bundle details section above uses Moreish stack.

Source Icon

Built with Source