JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

HTML

<form id="filter_form" method="post" action="">
<input type="hidden" name="country" value="'156'">
<div id="filter">
<div class="filter_header">FILTER PRODUCTS</div>
<div class="filter_title"><a class="nav_title" id="type_open" style="display: none;"><img src="/images/site/arrow_filter.png" height="9" width="9"> Type</a></div>
<div class="filter_title"><a class="nav_title" id="type_close" style=""><img src="/images/site/arrow_open.png" height="9" width="9"> Type</a></div>
<div id="type" style="">
<div class="filter_filters"><input type="checkbox" name="type_2">
<label for="Western" class="filter_link">Western</label>
</div>
<div class="filter_filters"><input type="checkbox" name="type_3">
<label for="English" class="filter_link">English</label>
</div>
<div class="filter_filters"><input type="checkbox" name="type_1">
<label for="Jumping" class="filter_link">Jumping</label>
</div>
<div class="filter_filters"><input type="checkbox" name="type_4">
<label for="Dressage" class="filter_link">Dressage</label>
</div>
</div>
</div>
</form>

CSS

#filter_form label{display:inline-block;height:13px;margin:0 5px;vertical-align:middle;background-image:url(/images/site/filter_checker.png);background-size:260px,26px;padding-left:18px;cursor:pointer;}
#filter_form label:hover{background-position:0px 13px;}
#filter_form input[type="checkbox"]:checked~label{background-position:0px 13px;}
#filter_form input[type="checkbox"]{display:none;}
#filter_form input[type="submit"]{display:block;margin-top:5px;}

JavaScript

$(function(){
     $('.filter_link').on('click',function(){
        $('#filter_form').submit();
     });
    
    $("#type_open").click(function(){
        $("#type").show();
        $("#type_open").hide();
        $("#type_close").show();
    });
    $("#type_close").click(function(){
        $("#type").hide();
        $("#type_open").show();
        $("#type_close").hide();
    });

});