Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Filtering tags? Reply To: Filtering tags?

#256599
Beverleyh
Participant

It’s possible to create a CSS-only filter using a combination of the :not selector and the checkbox hack, but there are limitations as far as nicely animating the results go. Pros and cons, as well as the technique, are covered here http://blog.fofwebdesign.co.uk/21-content-filter-javascript-css3-filter-by-class, as is a simple one-category filter using plain JavaScript (no dependencies). Items can occupy multiple categories.; the demo illustrates this with colours, where an aqua-colour may occupy both the ‘blue’ and ‘green’ category.

This next post delves a little deeper with a multi-level category filter – no CSS-only version here though, but again, it’s done in plain JavaScript, without extra libraries (jQuery) http://blog.fofwebdesign.co.uk/28-content-filter-refine-with-multi-category-select-show-selected-or-hide-selected This article demos a menu-like setup where you can select multiple categories to filter content into, for example, all starters that are vegetarian; it either shows the selected, or hides the selected options, depending on the settings you choose. Again, items can occupy multiple categories (e.g. A dish can be vegetarian, spicy/hot, and a main).

Anyway, those are options that I’ve tinkered with myself, so if learning is your game, it might be fun to pick apart the demos and explore the processes behind them. However, if you want to look into a pre-made solution (good if you want extra fluff, something more robust, fancier animations where blocks reorder themselves, and less brain-effort), you can Google something along the lines of “javascript filter and sort plugins” and a whole heap will pop up.