JSFiddle - React, Tailwind, and code Playground

by bellamystudio

HTML

<p id="catpicker"><a href="#" id="allcat" class="current">VIEW ALL</a> | <a href="#" id="reduced" class="filter">Rollback Pricing</a> | <a href="#" id="freeshipping" class="filter">Free Shipping</a> | <a href="#" id="discontinued" class="filter">Closeout</a> | <a href="#" id="webonly" class="filter">Web Only</a></p>
<p id="colpicker">Colours: <a href="#" id="allcol" class="current">VIEW ALL</a> | <a href="#" id="blue" class="col-filter">Blue</a> | <a href="#" id="red" class="col-filter">Red</a></p>
        
        <br />
        
        <div class="discounted-item freeshipping" rel="/store/products/FieldLazer-631-0.html">
        
            <img src="images/discountthumb-fieldlazer.jpg" alt="fieldlazer" />
            
            <div class="reasonbar">
                <div class="prod-title" style="width: 70%;">FieldLazer Field Marking Sprayer</div>
                <div class="reason" style="width: 29%;">Free Shipping!</div>
            </div>
            
            <div class="discount-bar">
                Shipping Cost: <span>$0</span>  <strike>Old Shipping Cost: $130</strike> <strong>Save $130!</strong>
            </div>
        
        </div>
        
        <div class="discounted-item reduced blue" rel="/store/catalog/Dryline_Markers-47-1.html">
        
            <img src="images/discountthumb-streamliner.jpg" alt="streamliner" />
            
            <div class="reasonbar">
                <div class="prod-title">Streamliner Field Chalkers</div>
                <div class="reason">Rollback Pricing</div>
            </div>
        
            <div class="discount-bar">
                Price lower than catalog. Save $30!
            </div>
        
        </div>
        
        <div class="discounted-item limited red" rel="/store/products/SPECIAL_Level_Head_Iron_Rake_Wooden_Handle-867-25.html">
        
            <img src="images/discountthumb-rake.jpg" alt="rake" />
            
            <div class="reasonbar">
                <div...

CSS

.blue {background-color:#69c}
.red {background-color:#c30}

JavaScript

$(function(){
       
   $("#allcat").click(function(){
       $(".discounted-item").slideDown();
       $("#catpicker a").removeClass("current");
       $(this).addClass("current");
       return false;
   });
   
   $(".filter").click(function(){
        var thisFilter = $(this).attr("id");
        $(".discounted-item").slideUp();
        $("."+ thisFilter).slideDown();
        $("#catpicker a").removeClass("current");
        $(this).addClass("current");
        return false;
   });
    
   $(".col-filter").click(function(){
        var thisFilter = $(this).attr("id");
       $("."+ thisFilter).toggle();
        //$(".discounted-item").slideUp();
       //$("."+ thisFilter).slideDown();
        $("#colpicker a").removeClass("current");
        $(this).addClass("current");
        return false;
   });

});