JSFiddle - React, Tailwind, and code Playground

by shanejones

HTML

<h1>Choose Category</h1>

<ul class="categories">
    <li><a href="" data-category="1">Cat 1</a></li>
    <li><a href="" data-category="2">Cat 2</a></li>
    <li><a href="" data-category="3">Cat 3</a></li>
    <li><a href="" data-category="4">Cat 4</a></li>
</ul>

&nbsp;
    <hr>

<div class="content">
    <div class="item" data-category="1">Cat 1</div>
    <div class="item" data-category="3">Cat 3</div>
    <div class="item" data-category="4">Cat 4</div>
    <div class="item" data-category="4">Cat 4</div>
    <div class="item" data-category="2">Cat 2</div>
    <div class="item" data-category="2">Cat 2</div>
    <div class="item" data-category="4">Cat 4</div>
    <div class="item" data-category="1">Cat 1</div>
    <div class="item" data-category="3">Cat 3</div>
    <div class="item" data-category="1">Cat 1</div>
    <div class="item" data-category="4">Cat 4</div>
    <div class="item" data-category="1">Cat 1</div>
    <div class="item" data-category="2">Cat 2</div>
    <div class="item" data-category="1">Cat 1</div>
    <div class="item" data-category="2">Cat 2</div>
</div>

SCSS

ul.categories {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
        margin: 0;padding: 15px;
        float: left;
        width: 20% ;
        
        a {
            padding: 10px;
        }
        
        a.active {
         background-color: lightgreen;   
        }
        
    }
}


.content {
    
    .item {
        float: left;
        width: 20%;
        height: 40px;
        
        &[data-category="1"]{
            background-color: red;
        }
        &[data-category="2"]{
            background-color: lightblue;
        }
        &[data-category="3"]{
            background-color: lightgreen;
        }
        &[data-category="4"]{
            background-color: yellow;
        }
        
    }
    
}

JavaScript

$(function(){
	$('ul.categories a').click(function(e){
    	e.preventDefault();     
        
        // toggle the active class
        if($(this).hasClass('active')){
        	$(this).removeClass('active') 	   
        } else {
        	$(this).addClass('active')
        }
        
         
        // Get a category id from data- param
        var cat = $(this).attr('data-category');
            
        // hide all items
        $('.item').hide();
        
        // loop through the active classes to get the id's
        $('ul.categories a.active').each(function(i){
                                         
            // show category items
        	$('.item[data-category="' + $(this).attr('data-category') + '"]').fadeIn();  
                                         
        })
        
        // optional, show all if none are active.
        if($('ul.categories a.active').length == 0) {
			$('.item').fadeIn();  
        }
            
        
              
        
        
    })


})