I have a switch that has a middle, left, and right position. Each time you click the toggle button it changes the variable 'pos'. I have also attached an Isotope grid. I want to make it so that I can filter the grid with the toggle button. I want the middle position to filter all (pos ==1 or 3), the left postion (pos == 2) to filter red, and the right position to filter blue (pos == 4).
jQuery
//Toggle
var pos = 1;
$('.toggle').click(function(){
if(pos === 1){
$('.button').css('left', '0');
}else if(pos === 2){
$('.button').css('left', '75px');
}else if(pos === 3){
$('.button').css('left', '150px');
}else if(pos === 4){
$('.button').css('left', '75px');
pos = 0;
}
pos++;
});
//Isotope Controls
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.color-shape'
});
// store filter for each group
var filters = {};
$('.filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-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;
}
Solved
jQuery
https://jsfiddle.net/cjymyzg6/6/