JSFiddle - React, Tailwind, and code Playground

by Peony Gerochi

HTML

<ul>
  <li class="apple">APPLE</li>
  <li class="tree">TREE</li>
  <li class="apple tree">ALL</li>
</ul>
<hr/>
<div>
  <div class="apple">APPLE</div>
  <div class="tree">TREE</div>
  <div class="apple">APPLE</div>
  <div class="tree">TREE</div>
  <div class="apple">APPLE</div>
  <div class="tree">TREE</div>
</div>

JavaScript

$("ul li").click(function() {
  visibleClasses = $(this).attr("class").split(" ");
  $("div div").hide(); // or slideUp / fadeOut
  for(i in visibleClasses) {
    $("div div."+visibleClasses[i]).fadeIn(500); // or slideDown / show
  }
});