JSFiddle - React, Tailwind, and code Playground

by chayacooper

HTML

<div id="container">
  <ul id="filterOptions">
    <li class="active"><a href="#" class="all">All</a></li>
    <li><a href="#" class="prem">Premier League</a></li>
    <li><a href="#" class="champ">Championship</a></li>
    <li><a href="#" class="league1">League 1</a></li>
    <li><a href="#" class="league2">League 2</a></li>
  </ul>
  
  <div id="content">
   
  <ul id="list"> 
		<li class="item league1"><a href="#">Item 1</a></li>       
		<li class="item league2"><a href="#">Item 2</a></li>       
		<li class="item prem"><a href="#">Item 3</a></li> 
</ul>

    <div class="item prem champ league2">
      <h3>Accrington Stanley</h3>
    </div>
    <div class="item prem">
      <h3>Arsenal</h3>
    </div>
    <div class="item league2">
      <h3>Morecambe</h3>
    </div>
    <div class="item champ">
      <h3>Norwich City</h3>
    </div>
    <div class="item league1">
      <h3>Notts County</h3>
    </div>
  </div>
</div>

CSS

ol, ul { list-style: none; }

ul#filterOptions {
	width: 802px;
	height: 52px;
	margin: 30px 0;
	overflow: hidden;
}
ul#filterOptions li { height: 52px; margin-right: 2px; float: left; }
ul#filterOptions li a {
	height: 50px;
	padding: 0 20px;
	border: 1px solid #999;
	background: #cfcfcf;
	color: #fff;
	font-weight: bold;
	line-height: 50px;
	text-decoration: none;
	display: block;
}
ul#filterOptions li a:hover { background: #c9c9c9; }
ul#filterOptions li.active a { background: #999; }

JavaScript

$(document).ready(function() {
	$('#filterOptions li a').click(function() {
		// fetch the class of the clicked item
		var ourClass = $(this).attr('class');
		
		// reset the active class on all the buttons
		$('#filterOptions li').removeClass('active');
		// update the active state on our clicked button
		$(this).parent().addClass('active');		
        
		if(ourClass == 'all') {
			// show all our items
		    $('#content').children('div.item').show();
		    $('#list').children('li.item').show();	
		}
		else {
			// hide all elements that don't share ourClass
		    $('#content').children('div:not(.' + ourClass + ')').hide();
		    $('#list').children(':not(li.' + ourClass + ')').hide();

			// show all elements that do share ourClass
		    $('#content').children('div.' + ourClass).show();
			$('#list').children('li.' + ourClass).show();
		}
		return false;
	});
});