Filtering
Isotope can hide and show item elements via the filter option. filter accepts a jQuery selector. Items that match that selector will be shown. Items that do not match will be hidden.
Markup
Each item element has several identifying classes. In this case, transition, metal, lanthanoid, alkali, etc.
<div id="container">
<div class="element transition metal">...</div>
<div class="element post-transition metal">...</div>
<div class="element alkali metal">...</div>
<div class="element transition metal">...</div>
<div class="element lanthanoid metal inner-transition">...</div>
<div class="element halogen nonmetal">...</div>
<div class="element alkaline-earth metal">...</div>
...
</div>
jQuery script
To show only .metal items, the jQuery script would be:
$('#container').isotope({ filter: '.metal' });
The filter option uses a jQuery selector to show item elements that match a selector, and hide all others that do not. For example:
.alkali, .alkaline-earthwill show.alkaliAND.alkaline-earthitem elements..metal.transitionwill show item elements that have BOTH.metaland.transitionclasses..metal:not(.transition)will show.metalitem elements that are NOT.transition.
Creating interactive buttons
Let’s use a basic list for our buttons
<ul id="filters">
<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".metal">metal</a></li>
<li><a href="#" data-filter=".transition">transition</a></li>
<li><a href="#" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
<li><a href="#" data-filter=":not(.transition)">not transition</a></li>
<li><a href="#" data-filter=".metal:not(.transition)">metal but not transition</a></li>
</ul>
Here we set the filter for each link with a data-filter attribute. In our jQuery script, whenever a link is clicked, we’ll use this attribute as the filter selector.
// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
// options...
});
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
Recommended CSS
If you choose to use the filtering functionality, add the following CSS to your stylesheet:
/**** Isotope filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
These styles ensure that hidden items will not interfere with interactions.