Combining filters Jquery Isotope

Question

I am trying to combine filters like this example: http://codepen.io/desandro/pen/JEojz/?editors=101 but I can't.

Codepen: http://codepen.io/anon/pen/gpbypp

HTML:

 <div id="filters"> <label class="pull-left">Seats: </label> <div class="btn-group" data-toggle="buttons" data-filter-group="seats"> <label class="btn btn-default active"> <input type="radio" data-filter="*">All </label> <label class="btn btn-default"> <input type="radio" data-filter=".seats-4">4 </label> <label class="btn btn-default"> <input type="radio" data-filter=".seats-5">5 </label> </div> <br> <br> <label class="pull-left">Transmission: </label> <div class="btn-group" data-toggle="buttons" data-filter-group="transmission"> <label class="btn btn-default"> <input type="radio" data-filter=".manual">Manual </label> <label class="btn btn-default"> <input type="radio" data-filter=".auto">Auto </label> </div> </div> <div id="isotope-container"> <div class="col-sm-3 item seats-5 auto"> <h3>Volkswagen Polo</h3> <p>5 seats auto</p> </div> <div class="col-sm-3 item seats-4 auto"> <h3>Suzuki Jimny</h3> <p>4 seats auto</p> </div> <div class="col-sm-3 item seats-4 manual"> <h3>Volkswagen Caddy</h3> <p>4 seats manual</p> </div> <div class="col-sm-3 item seats-5 manual"> <h3>Opel Zafira</h3> <p>5 seats manual</p> </div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

Isotope website

Answer 1

Starting with the codepen from Pixelsmith, I swapped out the JS to match the example that you posted. I believe this is what you were looking for. The is-checked formatting is a little wonky, but the functionality is there.

This is the new JS. Working example

$('.filters').on( 'click', '.btn', function() {
var $this = $(this);

var $buttonGroup = $this.parents('.btn-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');

var filterValue = concatValues( filters );
$container.isotope({ filter: filterValue });
});

// change is-checked class on buttons
$('.btn-group').each( function( i, buttonGroup ) {
 var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

Answer 2

There's an error in your JS that's stopping the function from running, and then quirks in your code that seem to break the function.

In the function you need to change the line $('#filters input').on('click', '.btn', function() { to $('#filters').on('click', '.btn', function() { , otherwise you're asking the browser to watch all input s in the #filters div for a click on .btn and that won't ever happen.

Second, I couldn't get the filters to work with the label/radio combination that you'd created, but I did get it to work with buttons. Is there a reason you're choosing radio buttons? If so you'll need to work with the code a bit more to make it happen, and you may want to move away from click and use attr('checked') instead.

Working Codepen

Good luck!