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.

See Demo: Filtering

Markup

Each item element has several identifying classes. In this case, transition, metal, lanthanoid, alkali, etc.

 id="container">
   class="element transition metal">...
class="element post-transition metal">... class="element alkali metal">... class="element transition metal">... class="element lanthanoid metal inner-transition">... class="element halogen nonmetal">... class="element alkaline-earth metal">... ...

jQuery script

To show only .metal items, the jQuery script would be:

$('#container').isotope({ filter: '.metal' });

Filtering selectors work just as expected. .alkali, .alkaline-earth will show both .alkali AND .alkaline-earth items, and hide all others. .metal.transition will show elements that have both .metal and .transition classes. .metal:not(.transition) will show .metal item elements that are not .transition.

Creating interactive buttons

Let’s use a basic list for our buttons

 id="filters">
  
  •  href="#" data-filter="*">show all
    • 
  
  •  href="#" data-filter=".metal">metal
    • 
  
  •  href="#" data-filter=".transition">transition
    • 
  
  •  href="#" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth
    • 
  
  •  href="#" data-filter=":not(.transition)">not transition
    • 
  
  •  href="#" data-filter=".metal:not(.transition)">metal but not transition
    •

    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.

    $('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#container').isotope({ filter: selector });
  return false;
});

    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.