jquery - MixItUp adds 'failed' class to div and does not filter items -

i'm trying use mixitup filter grid items. says should pretty simple. add class mix , class category of item, , add buttons same category.

<!-- buttons --> <button class="filter" data-filter="social">email</button> <button class="filter" data-filter="games">games</button> <button class="filter" data-filter="merch">merchandise</button>  <!-- grid --> <div class="portfolio-grid" id="mixitupbce8f4">    <div class="portfolio-item mix merch"></div>    <div class="portfolio-item mix social"></div>    <div class="portfolio-item mix games"></div> </div> 

i have initialised plugin such:

jquery(document).ready(function($) {     $(function(){         $('.portfolio-grid').mixitup();     }); }); 

and have added described 'vital' css:

.portfolio-grid .mix{display: none;} 

the plugin initialises, , css applies.

however, clicking of buttons causes grid items fade out. , no items show on page.

jsfiddle

what have done wrong? i've followed docs letter.

it seems me it's not matching items. can't understand, because can see code above there matches each item has class matches 1 of data-filters?

but haven't followed docs...the docs explain data-filter attributes on controls need actual selectors, such classes leading dots . (which odd, admit). example, data-filter="social" should data-filter=".social":

jquery('.portfolio-grid').mixitup();

.portfolio-item {    width: 100px;    height: 100px;    background-color: orange;    margin-bottom: 20px;    display: none;  }  .portfolio-item:first-child {    background-color: blue;  }  .portfolio-item:last-child {    background-color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.2"></script>    <!-- buttons -->  <button class="filter" data-filter=".social">email</button>  <button class="filter" data-filter=".games">games</button>  <button class="filter" data-filter=".merch">merchandise</button>    <!-- grid -->  <div class="portfolio-grid" id="mixitupbce8f4">     <div class="portfolio-item mix merch"></div>     <div class="portfolio-item mix social"></div>     <div class="portfolio-item mix games"></div>  </div>