JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="filterControls">
    <label><b>Colour</b></label>
    <label><input type="checkbox" value="Red" name="SliderCheck" /> Red</label>
    <label><input type="checkbox" value="Blue" name="FaderCheck" /> Blue</label>
    <label><input type="checkbox" value="Green" name="StaticCheck" /> Green</label>
<label><b>Animal</b></label>
    <label><input type="checkbox" value="Lion" name="SliderCheck" /> Lion</label>
    <label><input type="checkbox" value="Cheetah" name="FaderCheck" /> Cheetah</label>
    <label><input type="checkbox" value="Moose" name="CustomCheck" /> Moose</label>
</div>

<div id="siteFilter">
    <div class="sectionContent box Red Lion" style="display: inline-block;">
        <a href="http://www.twelve.com.au/" target="_blank">Red / Lion</a>
    </div>
    <div class="sectionContent box Red Moose" style="display: inline-block;">
        <a href="http://www.galpins.com.au/" target="_blank">Red Moose</a>
    </div>
    <div class="sectionContent box Blue Cheetah" style="display: inline-block;">
        <a href="http://www.wmcaccounting.com.au/" target="_blank">Blue Cheetah</a>
    </div>
</div>

CSS

#filterControls label { display:block; }
.box { height:100px; background:#eee; width:300px; text-align:center; line-height:100px; margin:5px; display:inline-block; }

JavaScript

$(document).ready(function() {

  var sections = $('.sectionContent');

  function updateContentVisibility() {
    var checked = $("#filterControls :checkbox:checked");
    if (checked.length) {
      sections.hide();
      var selectedClasses = "";
      checked.each(function() {
        selectedClasses += "." + $(this).val();

      });
      $(selectedClasses).show();
    } else {
      sections.show();
    }
  }

  $("#filterControls :checkbox").click(updateContentVisibility);
  updateContentVisibility();

});