(mixItUp) Toggle buttons does not respond

Question

https://www.kunkalabs.com/mixitup/, I followed the introduction, more precisely this code that can be tested here. I also tried duplicating this without luck.

The toggle buttons does not respond despite the filter buttons works as expected.

---

Link to minimum working example

---

$('#mix-wrapper').mixItUp({
    load: {
        sort: 'order:desc'
    },
    selectors: {        
        filter: '.filter-btn',
        toggle: '.mix-btn'
    },
    callbacks: {
        onMixFail: function (state) {
            alert('No elements found matching ' + state.activeFilter);
        },
        onMixEnd: function (state) {
            console.log(state.activeFilter);
        }
    }
});

.mix {
  display: none;
}

<script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
div
 button(class="filter-btn" data-filter=".nodejs") Filter nodejs
 button(class="filter-btn" data-filter=".example") Filter example
 button(class="filter-btn" data-filter="all") show all
 button(class="filter-btn" data-filter="none") hide all
div 
 button(type="button" class="mix-btn" data-toggle=".nodejs") .nodejs TOGGLE BUT
 button(type="button" class="mix-btn" data-toggle=".example") .example TOGGLE BUT

 ul#mix-wrapper
  li.mix.nodejs 
   div(style="width: 18rem;") nodejs 1
  li.mix.nodejs
   div(style="width: 18rem;") nodejs 12
  li.mix.example
   div(style="width: 18rem;") example1
  li.mix.example
   div(style="width: 18rem;") example12
  li.mix
   div(style="width: 18rem;") testing
  li.mix 
   div(style="width: 18rem;") testing

Answer 1

I'm the author of MixItUp.

It looks like your example is based on MixItUp v2 which is an old jQuery plugin from 2014. Toggle controls were introduced in v3, which was released in 2016 and is the latest major version. All the documentation on the MixItUp website is for v3. Essentially, you are trying to combine the v2 library with parts of the v3 API which will result in various errors or missing functionality.

Firstly, you may want to check out the v2-v3 migration guide to get you up and running with v3, and make sure any use of v2 APIs is removed from your code:

https://www.kunkalabs.com/mixitup/migration-guide/

Secondly, check out the tutorial entitled: "Filtering with MixItUp". Toggle controls and related concepts are documented extensively here:

https://www.kunkalabs.com/tutorials/filtering-with-mixitup/

Finally, MixItUp 3 includes a bunch of demos to help you get started with any feature (http://demos.kunkalabs.com/mixitup).

There are two toggle controls demos which demonstrate the difference between "AND" and "OR" control logic, which will hopefully be of use to you:

https://demos.kunkalabs.com/mixitup/toggle-filtering-or-logic/ https://demos.kunkalabs.com/mixitup/toggle-filtering-and-logic/