In jQuery è semplice creare un filtro per la visibilità degli elementi.
Supponendo che ciascun elemento filtro abbia un attributo di dati il cui valore corrisponde ad una classe specifica assegnata a uno o più elementi, possiamo scrivere il seguente codice:
$( ".filter" ).click(function() {
var filter = $( this ).data( "filter" );
var filterClass = "." + filter;
$( ".items" ).fadeIn();
$( ".items" ).not( filterClass ).fadeOut();
return false;
});
La prima azione eseguita ripristina lo stato iniziale di visibilità di tutti gli elementi, mentre la seconda esclude gli elementi aventi la classe creata dal filtro nascondendo tutti gli altri.