MixItUp not filtering by classes

Question

I've been following the docs on the MixItUp website.

I'm using WordPress to help create the classes on each item that needs to be filtered.

This is located in my content-upcoming-games.php

<div class="controls col-md-12">
   <label>Sort By:</label>

   <button class="filter" data-filter="all">All</button>
   <button class="filter" data-filter=".ps4">PS4</button>
   <button class="filter" data-filter=".xbox-one">Xbox One</button>
   <button class="filter" data-filter=".wii-u">Wii U</button>
   <button class="filter" data-filter=".pc">PC</button>
</div>

<?php if(is_post_type_archive( 'upcoming-games' )) {
   $class ='';
   $consoles_slug = wp_get_object_terms( $post->ID,  'consoles' );
   foreach ($consoles_slug as $console_slug) {
   $class .= $console_slug->slug . ' ';
   } }
?>

<div id="upcoming-games-list">
   <div class="mix <?php echo $class ?>">
      Content
   </div>
</div>

This is located in my main.js:

$('#upcoming-games-list').mixItUp({
        animation: {
        enable: true,
        effects: 'fade scale',
        duration: 600,
        easing: 'ease',
        perspectiveDistance: '3000px',
        perspectiveOrigin: '50% 50%',
        queue: true,
        queueLimit: 1,
        animateChangeLayout: false,
        animateResizeContainer: true,
        animateResizeTargets: false,
        staggerSequence: null,
        reverseOut: false
        }
    });

The php is working, when I inspect the code it's outputting the classes as I have them named in the data-filter. So the issue basically is, when I click on the button, it doesn't filter the content appropriately. For a live example, click here.

Answer 1

By default your items should be hidden by CSS. So, add this to make it work correctly:

#upcoming-games-list > .row > div {
    display: none;
}

In their DOCs they say:

Before we get to the fun part, there’s one small but crucial CSS rule we must add to our project’s stylesheet to hide our target elements.

#Container .mix{
    display: none;
}

» Target elements must be hidden by default in your project's stylesheet.