JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<a id="anchor1" href="#">Anchor 1</a><a id="anchor2" href="#">Anchor2</a>
<div id="main">    
    <div id="category1">
        <div id="product1">1</div>
        <div id="product2">2</div>
        <div id="product3">3</div>
    </div>

    <div id="category2">
        <div id="product4">4</div>
        <div id="product5">5</div>
        <div id="product6">6</div>
    </div>
</div>

JavaScript

function controlCategory(a) {   
    $("#category1").fadeOut();
    $("#category2").fadeOut();
    $(a).fadeIn();
 }
 function controlCSS() { }



$(function () {

  $("#anchor1").click(function(event) {
   event.preventDefault();
   controlCSS(this);
   controlCategory("#category1");
  });

  $("#anchor2").click(function(event) {
   event.preventDefault();
   controlCSS(this);
   controlCategory("#category2");
  });
});