MixItUp Example

Test filtering using mixitup jQuery plugin

by bizamajig

HTML

<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<div class="controls">
  <button class="filter" data-filter="all" type="button">
    Show all
  </button> 
  <button class="filter" data-filter=".yellow" type="button">
    Yellow
  </button>
  <button class="filter" data-filter=".green" type="button">
    Green
  </button>
  <button class="filter" data-filter=".red" type="button">
    Red
  </button>    
</div>

<div id="color-container">
  <div class="mix yellow">
      <p>Yellow</p>
  </div>
  <div class="mix green">
      <p>Green</p>
  </div>    
  <div class="mix red">
      <p>Red</p>
  </div>    
</div>

CSS

#color-container .mix{
  display: none;
}

JavaScript

$('#color-container').mixItUp();