Remove multiple filter/sort mixitup jquery plugin
I'm trying to remove the multiple filter in "mixitup" jquery plugin. I just want the plugin to only select one value instead of selecting multiple values. Here is my work in progress
http://digitalspin.ph/federalland/project-page/
Here is the **MARKUP CODE -**
<div class="group" id="Filters">
<div class="drop_down wf">
<span class="anim150">Location</span>
<ul class="anim250">
<li class="active" data-filter="all" data-dimension="location">All</li>
<li data-filter="thefort" data-dimension="location">The Fort</li>
<li data-filter="cavite" data-dimension="location">Cavite</li>
<li data-filter="cebu" data-dimension="location">Cebu</li>
<li data-filter="marikina" data-dimension="location">Marikina</li>
<li data-filter="quezoncity" data-dimension="location">Quezon City</li>
<li data-filter="manila" data-dimension="location">Manila</li>
<li data-filter="pasay" data-dimension="location">Pasay</li>
<li data-filter="sanjuan" data-dimension="location">San Juan</li>
<li data-filter="makati" data-dimension="location">Makati</li>
</ul>
</div>
<div class="drop_down wf">
<span class="anim150">Price</span>
<ul class="anim250">
<li class="active" data-filter="all" data-dimension="price">All</li>
<li data-filter="1m_3m" data-dimension="price">1m - 3m</li>
<li data-filter="3m_5m" data-dimension="price">3m - 5m</li>
<li data-filter="5m_10m" data-dimension="price">5m - 10m</li>
<li data-filter="10m_20m" data-dimension="price">10m - 20m</li>
<li data-filter="20m_up" data-dimension="price">20m and up</li>
</ul>
</div>
</div>
**JQUERY CODE**
<script>
$(function () {
// INSTANTIATE MIXITUP
$('#Grid').mixitup({
effects: ['fade', 'blur']
});
// HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING
var $filters = $('#Filters').find('li'),
dimensions = {
location: 'all', // Create string for first dimension
price: 'all' // Create string for second dimension
};
var $filters = $('#Filters').find('li');
var filterString = 'all';
// Bind checkbox click handlers:
$filters.on('click',function(){
var $t = $(this),
dimension = $t.attr('data-dimension'),
filter = $t.attr('data-filter'),
filterString = dimensions[dimension];
if (filter == 'all') {
// If "all"
if (!$t.hasClass('active')) {
// if unchecked, check "all" and uncheck all other active filters
$t.addClass('active').siblings().removeClass('active');
// Replace entire string with "all"
filterString = 'all';
}
} else {
// Else, uncheck "all"
$t.siblings('[data-filter="all"]').removeClass('active');
// Remove "all" from string
filterString = filterString.replace('all', '');
if (!$t.hasClass('active')) {
// Check checkbox
$t.addClass('active');
// Append filter to string
filterString = filterString == '' ? filter : filterString + ' ' + filter;
} else {
// Uncheck
$t.removeClass('active');
// Remove filter and preceeding space from string with RegEx
var re = new RegExp('(\\s|^)' + filter);
filterString = filterString.replace(re, '');
};
};
// Reset to all if none are active
if ($filters.filter('.active').size() == 0) {
$filters.filter('[data-filter="all"]').addClass('active');
filterString = 'all';
}
// Set demension with filterString
dimensions[dimension] = filterString;
// We now have two strings containing the filter arguments for each dimension:
console.info('dimension 1: '+dimensions.location);
console.info('dimension 2: '+dimensions.price);
$('#Grid').mixitup('filter',[dimensions.location, dimensions.price])
});
});
</script>
--UPDATE--
I have tried adding multiFilter but it doesn't seem to be working. I can still select multiple items
$('#Grid').mixitup({
multiFilter: false,
effects: ['fade', 'blur']
});