JSFiddle - React, Tailwind, and code Playground

by KCarnaille

HTML

<ul>
  <li data-filter=".redbox">Red</li>
  <li data-filter=".bluebox">Blue</li>
</ul>

<a href="#">Reset</a>

<div class="redbox"></div>
<div class="bluebox"></div>
<div class="redbox"></div>
<div class="redbox"></div>
<div class="bluebox"></div>
<div class="bluebox"></div>

CSS

div{
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 5px;
}
div.redbox{
  background-color: red;
}
div.bluebox{
  background-color: blue;
}

JavaScript

$(function(){

});


var filterBoxes = function(){

	 function displayBoxColor(){
  	  $('ul li').on('click', function(){
        $('div').hide();
        $($(this).data("filter")).show();
    });
  }
  
  function resetFilter(){
  	$('a').on('click', function(e){
    	e.preventDefault();
      $('div').show();
    });
  }

};