Isotope toggle combination filters

Question

I would like to make the Isotope combination filters toggle, so for exmple here

http://isotope.metafizzy.co/demos/combination-filters.html

when clicking on "red" I would like to be able to toggle it. So it would show me all the reds when clicking on it once and when clicking again it would show me all again. Also with that I would like to be able to keep selected multiple buttons, for example "red" and "blue" selected that would show me the reds and the blues. If I click again on one of them it would leave the other selected and hide the toggled ones. This should be able to work in combination with the other filters and these should work in the same way, with toggle function. Is this even achievable? I have tried combining the isotope multiple filters plugin from the above link with isoSelective taken from this fiddle but no luck.

Here is some code I've used and a fiddle I've created but it's not working

$(function(){

var $container = $('#tiles .inner'),
    filters = {};

 $container.isotope({
    animationOptions: {
        duration: 1000,
        queue: false
    },
    itemSelector : '.tile',
    masonry: {
        columnWidth: 130,
        gutterWidth: 41
    }
});

// filter buttons
$('.filter li').click(function(){
  var $this = $(this);
  // don't proceed if already selected
  if ( $this.hasClass('selected') ) {
    return;
  }

  var $optionSet = $this.parents('.filter');
  // change selected class
  $optionSet.find('.selected').removeClass('selected');
  $this.addClass('selected');

  // store filter value in object
  // i.e. filters.color = 'red'
  var group = $optionSet.attr('data-filter-group');
  filters[ group ] = $this.attr('data-filter');
  // convert object into array
  var isoFilters = [];
  for ( var prop in filters ) {
    isoFilters.push( filters[ prop ] )
  }
  var selector = isoFilters.join('');
  $container.isotope({ filter: selector });
//$container.isoSelective({
//      filter: '.filter-nav',
//      attrSelector: 'data-filter'
//});
  return false;
});

});

http://jsfiddle.net/AcFAe/

Any help would be much appreciated. Thanks in advance

Answer 1

isoSelective uses the .live() method at one point, which was removed altogether in jQuery 1.9.

You'll need jquery-migrate jquery-migrate didn't work for me.

I just updated isoSelective to be compatible with jQuery 1.9+: https://github.com/simmerdesign/jquery-isoselective