You are here: Home / Freebies For Websites / Demos & Snippets

JavaScript & CSS3 Content Filter

This demo supersedes the earlier script that requires filter categories to be defined in an array.

Let visitors select categories from your portfolio, and view them in a collapsed group, with this simple JS and CSS3 filter.

This demo uses JavaScript to perform the item filtering, and CSS3 transitions to fade the results into view. Categories are defined with classes on each ".filter-item" div. Note that item 7 and 10 occupy multiple categories.

Works in all browsers, but IE8/9 users forego the fade effect.

Please view the source of this page for HTML markup, CSS and JS.

Filter:
1
2
3
4
5
6
7
8
9
10
11
12

Setting-up Filters

Each checkbox filter group should have a unique name;

<input type="checkbox" id="blue" class="filter-input" name="filter" /><label for="blue" class="filter-label">Blue</label>
<input type="checkbox" id="red" class="filter-input" name="filter" /><label for="red" class="filter-label">Red</label>
<input type="checkbox" id="green" class="filter-input" name="filter" /><label for="green" class="filter-label">Green</label>

And the unique checkbox id of each filter should match the corresponding label's "for" attribute;

<input type="checkbox" id="blue" class="filter-input" name="filter" /><label for="blue" class="filter-label">Blue</label>

Which must also match the filterable class on the relevant filter-item(s);

<div class="filter-wrap">
    <div class="filter-item blue"> 1 </div>
    ... <!-- more filter-items here -->
</div> <!-- closing .filter-wrap -->

The "All" checkbox must also carry the ".filter-all" class, and should be checked;

<input type="checkbox" id="filter-all" class="filter-input filter-all" name="filter" checked /><label for="filter-all" class="filter-label">All</label>

Related

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.