Skip to content

Instantly share code, notes, and snippets.

@HelgeSverre

HelgeSverre/filter.js

Last active Feb 14, 2017
Embed
What would you like to do?
Simple class based jaavascript filtering solution using data attributes
$(".filters .filters__wrapper ul").on("click", "li", function () {
// Set clicked element as active
$(this).siblings().removeClass("active");
$(this).toggleClass("active");
// Get the class to filter by
var filterClass = $(this).data("filter").trim();
// Get the grid this filter applies to (use data-grid="#some-id-here")
var gridIdentifier = $(this)
.parent("ul")
.data("grid");
// Get grid items
var items = $(gridIdentifier).children(".grid__item");
// Show/Hide based on their class
for (var i = 0; i < items.length; i++) {
var item = $(items[i]);
if (filterClass == "*" || filterClass == "") {
item.fadeIn();
} else if (!item.hasClass(filterClass)) {
item.fadeOut(500);
} else {
item.fadeIn(500);
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.