Filtering - Isotope - Multiple Filters

by bizamajig

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<section id="options" class="clearfix">
    
    
      <h3>Filters</h3>

      <ul id="filters" class="option-set clearfix" data-option-key="filter">
        <li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
        <li><a href="#filter" data-option-value=".metal">metal</a></li>
        <li><a href="#filter" data-option-value=".transition">transition</a></li>
        <li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
        <li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
        <li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
        <li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
        <li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
        <li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
      </ul>


  </section> <!-- #options -->
  
  <div id="container" class="clearfix">
    
      
          
    <div class="element transition metal   " data-symbol="Hg" data-category="transition">
      <p class="number">80</p>
      <h3 class="symbol">Hg</h3>
      <h2 class="name">Mercury</h2>
      <p class="weight">200.59</p>
    </div>
    
      
          
    <div class="element metalloid   " data-symbol="Te" data-category="metalloid">
      <p class="number">52</p>
      <h3 class="symbol">Te</h3>
      <h2 class="name">Tellurium</h2>
      <p class="weight">127.6</p>
    </div>
    
      
          
    <div class="element post-transition metal   " data-symbol="Bi" data-category="post-transition">
      <p class="number">83</p>
      <h3 class="symbol">Bi</h3>
      <h2 class="name">Bismuth</h2>
      <p class="weight">208.9804</p>
    </div>
    
      
          
    <div class="element transition metal   " data-symbol="Cd"...

JavaScript

$(function () {
    "use strict";
    
    //Define your containers and option sets
    var $container = [$('#container'), $('#container-new')], $optionSets = [$('#options .option-set'), $('#options-new .option-set')];

    //Initialize isotope on each container
    jQuery.each($container, function (j) {
        this.isotope({
            itemSelector : '.element'
        });
    });

    //Initialize filter links for each option set
    jQuery.each($optionSets, function (index, object) {
        
        var $optionLinks = object.find('a');

        $optionLinks.click(function () {
            var $this = $(this), $optionSet = $this.parents('.option-set'), options = {},
                key = $optionSet.attr('data-option-key'),
                value = $this.attr('data-option-value');
            // don't proceed if already selected
            if ($this.hasClass('selected')) {
                return false;
            }
 
            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');
    
            // make option object dynamically, i.e. { filter: '.my-filter-class' }
            
            // parse 'false' as false boolean
            value = value === 'false' ? false : value;
            options[key] = value;
            if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
              // changes in layout modes need extra logic
                changeLayoutMode($this, options);
            } else {
              // otherwise, apply new options
                
                $container[index].isotope(options);
            }
            
            return false;
        });
    });
});