JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="showAll">show ALL</div>
<div class="activator" id="manager">managers</div>
<div class="activator" id="designer">designers</div>
<div class="activator" id="developer">developer</div>

<div class="manager" id="people">managers</div>
<div class="designer" id="people">designer</div>
<div class="developer" id="people">developer</div>
<div class="manager" id="people">managers</div>
<div class="designer" id="people">designer</div>
<div class="developer" id="people">developer</div>
<div class="manager" id="people">managers</div>
<div class="designer" id="people">designer</div>
<div class="developer" id="people">developer</div>
<div class="manager" id="people">managers</div>
<div class="manager" id="people">managers</div>
<div class="developer" id="people">developer</div>
<div class="manager" id="people">managers</div>

CSS

.manager, .designer, .developer {
    float:left;
    height:90px;width:90px;
    background:#dfdfdf;
    border:1px solid #eee;
    text-align:center;
    line-height:90px;
    color:silver;

}

.activator {
padding:10px;
cursor:pointer;    
}

JavaScript

var pep = $('div#people');
$('.showAll').on('click',function(){
    pep.show(10);
    
});

$('.activator').on('click', function(){    
var toHide = $(this).attr('id');
pep.show();    
pep.filter(':not(.'+ toHide +')').hide();   
});