Endless flexibility
* 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...
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.
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.
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.
Tab interaction
How you style the buttons is completely customisable. Enabling you to build things like your own tab-style interactions.
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.
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.
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.
10 user accounts
300 transactions per month
1000 emails per month
Business hours support
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!
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!
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.
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.
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.
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.
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.
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.
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.
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.
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:
New!
Content Filter
Powerful (CSS only!) content filter to selectively show and hide page content
Buy for
Buy for
Buy for
Over 60% off!
Stacks bundle
Our stacks bundle includes ALL of our stacks in one incredible bundle dea (along with an exclusive project file)!
Buy for
Buy for
Buy for
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.
Yes - you can set up Filter stack to work with Poster 2's tags or categories. Allowing you to easily take advantage of the bespoke display your blog list tags. View demo.
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.
You can extend the functionality of Filter stack quite easily. For example by filtering using a drop-down menu or even having filter split out sections of a markdown document!
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.
