JSFiddle - React, Tailwind, and code Playground

by Tobias Beuving

HTML

<div class="card card-studio card-2011 card-bright">Studio 2011</div>
<div class="card card-house card-2012 card-bright">House 2012</div>
<div class="card card-commercial card-2013 card-bright">Commercial 2013</div>
<div class="card card-personal card-2012 card-bright">Personal 2012</div>
<div class="card card-studio card-2014 card-bright">Studio 2014</div>
<div class="card card-commercial card-2011 card-bright">Commercial 2011</div>
<div class="card card-house card-2014 card-bright">House 2014 </div>
<div class="card card-personal card-2013 card-bright">Personal 2013</div>

<div class="buttons">
    <div class="time">
        <a href="#" data-year="2011" class="button button-2011">2011</a>
        <a href="#" data-year="2012" class="button button-2012">2012</a>
        <a href="#" data-year="2013"  class="button button-2013">2013</a>
        <a href="#" data-year="2014"  class="button button-2014">2014</a>
        <a href="#" data-year="alltime"  class="button button-alltime">Alltime</a>
    </div>
    <div class="category">
        <a href="#" data-cat="studio" class="button button-studio">Studio</a>
        <a href="#" data-cat="house" class="button button-house">House</a>
        <a href="#" data-cat="commercial" class="button button-commercial">Commercial</a>
        <a href="#" data-cat="personal" class="button button-personal">Personal</a>
        <a href="#" data-cat="all" class="button button-all">All</a>
    </div>
</div>

CSS

a{
    text-decoration: none;
    color: black;
}

.buttons{
    margin-top: 40px;
}

.time{
    margin-bottom: 20px;
}

.card-bright{
    opacity: 1;
}

.card-faded{
    opacity: 0.3;
}

.button-active{
    text-decoration: underline;
}

JavaScript

var lastCategory = 'all';
var lastYear = 'alltime';

$(function(){
	$(".button-all").addClass("button-active");
    $(".button-alltime").addClass("button-active");
   
    
	$(".category > .button").on("click", function(event){
        
        event.preventDefault();
        
        var tmpCat = $(this).data('cat');
        lastCategory = tmpCat;
        $(".card").removeClass("card-faded");
		
        
        if (tmpCat == 'all') {
			if (lastYear == 'alltime') {
                $(".card").addClass("card-faded");
            } else {
        		$(".card-"+lastYear).addClass("card-faded");
			}
        	
        } else {
            
			if (lastYear == 'alltime') {
                $(".card-" + tmpCat).addClass("card-faded");
            } else {
        		$(".card-" + tmpCat + ".card-"+lastYear).addClass("card-faded");
			}
            
        }
        
        
         $(this).siblings()
                .removeClass("button-active")
            	.end()
                .addClass("button-active");        
        
        
        
    });
    
    $(".time > .button").on("click", function(event){
        
        event.preventDefault();
        
        var tmpYear = $(this).data('year');
        lastYear = tmpYear;
        $(".card").removeClass("card-faded");
        
       if (tmpYear == 'alltime') {
        
			if (lastCategory == 'all') {
                $(".card").addClass("card-faded");
            } else {
        		$(".card-" + lastCategory).addClass("card-faded");
			}
        	
        } else {
			if (lastCategory == 'all') {
                $(".card-" + tmpYear).addClass("card-faded");
            } else {
        		$(".card-" + lastCategory + ".card-"+tmpYear).addClass("card-faded");
			}
            
        }        
        
        
        
         $(this).siblings()
                .removeClass("button-active")
            	.end()
                .addClass("button-active");        
        
        
        
    });    
    

})