JSFiddle - React, Tailwind, and code Playground

by Scott Mendez

HTML

<div class="big-wrap">
	<select class="dropdown">
		<option value="all">Compatible with </option>
						<option value="iphone">iPhone</option>
						<option value="Samsung">Samsung</option>
						<option value="iPad">iPad</option>
						<option value="Cat®B100">Cat® B100</option>
						<option value="Cat®B25">Cat® B25</option>
						<option value="Cat®B15Q">Cat® B15Q</option>
		
	</select>
	<select class="dropdown">
		<option value="all">Product type </option>
						<option value="Case">Case</option>
						<option value="Charger">Charger</option>
						<option value="Holder">Holder</option>
		
	</select> 
</div>
<div id="FilterContainer">


	<div class="results" style="display: none;">(all) Results</div>
      
									   <div class="row featurette Case Active Urban iPhone 6 Protective Case" style="display: none;">
							<div class="col-md-5">
							</div>
							<div class="col-md-7">
								<h2>Active Urban iPhone 6 Protective Case</h2>
								<p class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut elit eget felis congue vestibulum eu nec tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
								 
							</div>
						</div>
						   <div class="row featurette Case Active Urban Samsung S5 Protective Case" style="display: none;">
							<div class="col-md-5">
								 
							</div>
							<div class="col-md-7">
								<h2>Active Urban Samsung S5 Protective Case</h2>
								<p class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut elit eget felis congue vestibulum eu nec tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
								
							</div>
						</div>
						   <div class="row featurette Case Active Urban iPad Mini Protective Case" style="display: none;">
							<div class="col-md-5">
								
							</div>
							<div class="col-md-7">
								<h2>Active Urban iPad Mini Protective...

JavaScript

$(document).ready(function() {
	$("div#FilterContainer > div").hide();
	var type =window.location.hash.substr(1);
	
	if(type!=="")
	{
		// it's filter while page load.	
		var filter =window.location.hash.substr(1); 
		$('#FilterContainer > div').show();
		$('#FilterContainer >div:not(.' + filter + ')').hide();
	    $('.dropdown option[value="' + filter + '"]').attr('selected', true);
	}
		
	
});

	
$("select.dropdown").change(function(){
    var filters = $.map($("select.dropdown").toArray(), function(e){
        return $(e).val();
    });
	
    var filter;
    if(filters[0]=="all")
    {
        if(filters[1]=="all")
           filter = "";
        else
           filter = "." + filters[1];
    }
    else{
        if(filters[1]=="all")
           filter = "." + filters[0];
        else
           filter = "." + filters.join(".");
    }
    $("div#FilterContainer > div").hide();
    $("div#FilterContainer").find("div" + filter).show();
    console.log(filters);
});


//when a link in the filters div is clicked...
	$('#filters a').click(function(e){
		
		//prevent the default behaviour of the link
		e.preventDefault();
		
		//get the id of the clicked link(which is equal to classes of our content)
		var filter = $(this).attr('id');
		
		//show all the list items(this is needed to get the hidden ones shown)
		$('#FilterContainer > div').show();
		
		/*using the :not attribute and the filter class in it we are selecting
		only the list items that don't have that class and hide them '*/
		$('#FilterContainer >div:not(.' + filter + ')').hide();
	
	});