---
title: Combination filters
layout: default
category: demos
schema:
  - name: color
    filters: [ red, blue, yellow ]
  - name: size
    filters: [ small, wide, tall, big ]
  - name: shape
    filters : [ round, square ]
---

<section id="copy">
  <p>Filters can be combined. In addition to filtering for just <code>.red</code> or <code>.tall</code>, you can pass in a filter selector of both: <code>.red.tall</code>.</p>
</section>

<section id="options" class="clearfix combo-filters">
  
  <h3>Filters</h3>

  {% for group in page.schema %}
    <div class="option-combo {{ group.name }}">
      <h4>{{ group.name }}</h4>
      <ul class="filter option-set clearfix " data-filter-group="{{ group.name }}"> 
        <li><a href="#filter-{{ group.name }}-any" data-filter-value="" class="selected">any</a>
        {% for filter in group.filters %}
          <li><a href="#filter-{{ group.name }}-{{ filter }}" data-filter-value=".{{ filter }}">{{ filter }}</a>
        {% endfor %}
      </ul>
    </div>
  {% endfor %}

</section> <!-- #options -->

<div id="container" class="clearfix">
  {% for size in page.schema[1].filters %}
    {% for shape in page.schema[2].filters %}
      {% for color in page.schema[0].filters %}
        <div class="color-shape {{ size }} {{ shape }} {{ color }}"></div>
      {% endfor %}
    {% endfor %}
  {% endfor %}
  
  
  {% for color in page.schema[0].filters %}
    {% for shape in page.schema[2].filters %}
      {% for size in page.schema[1].filters %}
        <div class="color-shape {{ size }} {{ shape }} {{ color }}"></div>
      {% endfor %}
    {% endfor %}
  {% endfor %}
  
</div> <!-- #container -->

<script src="../{{ site.jquery_js }}"></script>
<script src="../{{ site.isotope_js }}"></script>
<script>
  $(function(){
    
    var $container = $('#container'),
        filters = {};

    $container.isotope({
      itemSelector : '.color-shape',
      masonry: {
        columnWidth: 80
      }
    });

    // filter buttons
    $('.filter a').click(function(){
      var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
        return;
      }
      
      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');
      
      // store filter value in object
      // i.e. filters.color = 'red'
      var group = $optionSet.attr('data-filter-group');
      filters[ group ] = $this.attr('data-filter-value');
      // convert object into array
      var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
      var selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    });

  });
</script>