Deactivate filter on second click

[jaro-io]

hey @patrickkunka ! i am trying to do a simple thing with multifilter but i just cant get it right for days now. would be super lovely if you could take a quick look at this.

i understand the difference between filter & toggle. but i kind of would like to combine the two. so i want a filter that can be deactivated again on the second click. so the group jumps back to the initial state, like an all filter.

this is what i got so far:

onMixClick: function(state, originalEvent) {

  if (this.classList.contains('filter__item--active')){

    mixer.toggleOff(this.dataset.filter);
    this.classList.remove('filter__item--active');

    return false;
  }
}

https://user-images.githubusercontent.com/20298313/110620968-f8dacb80-8199-11eb-8fbe-fa75c91fbf92.mp4

the problem is, as you can see, it only works per group. i also thought i wouldnt have to manually remove my active class because mixitup does this for me when using the toggleOff() function. but this doesnt seem to be the case. somehow mixitup still remembers the last active filter and when i switch groups, both become active. can you explain that?

thank you so much for standing by! jaro 🌞 🌻

[jaro-io]

just found the solution myself. in fact when using return false, this will always give you the same item. i dont know why. so its better to use originalEvent.target for this purpose.

onMixClick: function(state, originalEvent) {

  if (originalEvent.target.classList.contains('filter__item--active')){

    mixer.toggleOff(target.dataset.filter);
    target.classList.remove('filter__item--active');

    return false;
  }
}