Snippets are small pieces of reusable code that solve specific problems within a website or web application. The focus here is on client side coding using HTML5, CSS (CSS3) and Javascript.

Filtering / tags

This snippet searches for tagged elements (using a data-tags attribute), builds a clickable tag list, and enables filtering based on the tags clicked.

Filtering / tags snippet screenshot


Two javascript versions are included – one using library-free ‘vanilla’ javascript, and one using jQuery.

Demo and download

View the demo or download the files.


  • This code works out of the box for all modern browsers including IE >= 10.
  • You do not need to run the code on a web server. Opening the index.html file from your local machine/filesystem in a web browser will result in a fully working demo.
  • The demo and download package includes the HTML5 boilerplate from

Why have two javascript versions?

The jQuery version has the lowest additional overhead if you are using jQuery anyway.

However although the ‘vanilla’ javascript file is larger, it has no need for jQuery and hence has lower overall overheads and will have a quicker page load time.

More help?

You are free to use the Filtering/tags Snippet code, with the exception of any photographic images included for demonstration purposes, under the MIT license. If further development or support is required, on a commercial basis, then contact me.