Joining multiple checkbox filters within Isotope.js

Question

I have a filter search working that has 2 category filters:

1. Category

2. Business Type

The filter buttons are built using the checkbox hack so that I can select multiple ones at a time. My problem is, if I select 2 from the top (category) section, it will filter. Ie: Landing Pages / Blogs But if I select 1 from the top and 1 from the bottom (ie: Blogs / B2B)

It will pull all the B2B options and not just the blogs. I believe my problem is happening where I join the filters in Isotope.JS.

Here is my fiddle with a working example of mine

and my JS function is:

$(function(){

  var $container = $('.examples-container').isotope({
    itemSelector: '.example'
  });

  var $checkboxes = $('.filter-buttons label input');
  $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    var joinFilters = filters.join(', ');
    $container.isotope({ filter: joinFilters });
  });


});

Answer 1

The filter is like a jQuery or CSS syntax. .blog, .b2b means "items with class blog OR b2b". You are looking for .blog.b2b

So in your code var joinFilters = filters.join(''); instead of var joinFilters = filters.join(', ');