JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

<div class="buttons">
<a  id="showall">All</a>
<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>
</div>

<div  class="targetDiv div1">Lorum Ipsum1</div>
<div  class="targetDiv div2">Lorum Ipsum2</div>
<div  class="targetDiv div3">Lorum Ipsum3</div>
<div  class="targetDiv div4">Lorum Ipsum4</div>
<div >
  <div class=" div1">
    <a href="#">apple</a>
  </div>
</div>

JavaScript

jQuery(function(){
         jQuery('#showall').click(function(){
               jQuery('.targetDiv').show();
        });
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('.div'+$(this).attr('target')).show();
        });
});