Filtering tags?

[M46]

My portfolio is a series of DIV tags. I’d like to contain options at the top to filter the list. For example:

All | Web | Print | Brand

Right now of course, it shows “All”, but I’d like let the user click to only see entries flagged for certain lists. A single DIV may be in part of multiple sets. I don’t need you to write the code for me, but can you point me to the right direction? Like a tutorial, or the type of commands I should be using. I have moderate CSS skill. I have been doing it since it came out, but nothing super complicated. I’d MUCH prefer to do this purely through CSS, but if that’s not possible, I’ve implemented javascript code and similar things (skilled enough to tweak variables, but not to write it myself).

Second priority would be for the newly clicked on set of DIV tags to animate into place. Not necessary, and not as important as the first question. Just would be nice. I have done a little css animation, but not much.

Thank you for any help with direct advice or pointing me in the right direction!

[Beverleyh]

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.

[M46]

I don’t care if it’s a learning solution or not. I mean, I want to learn it, but that will happen just by implementing and debugging. I don’t want to learn coding languages much beyond css, but don’t mind implementing them.

Basically I have the portfolio already done and populated with content including all the image prep to work with the css as is. Each entry is neatly nested in a DIV, so I don’t want to re-work the content/code for that part. That’s why I was looking for a css solution. Because I’ve seen pre-made solutions have their own setup for how to do the content for each entry.

But thanks so much, I’ll look into those!

[bearhead]

Here is a very simple example of how to show/hide divs based on data-* attributes (your “tags” essentially) with javascript:
https://codepen.io/kvana/pen/LLJmZb

If you want animation, you’ll have to add/remove classes instead of just changing the display style directly.

I would not recommend implementing this kind of interaction with only css.

[M46]

@bearhead

Thanks, I’ve never used data-tags, but this is pretty close to what I was envisioning. Can divs have multiple data tags? Like data-tag=”red, yellow”.

[bearhead]

In that case it might be better to just use class names as tags:
https://codepen.io/kvana/pen/LLJmZb

[M46]

That’s super cool. I didn’t realize I could type right in there and see live results (wouldn’t have asked, would have just tried it). Thanks!!!

[Author]

Posts