<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>simple rall filteration with jquery</h2> </div> <div class="filterbar"> <span class="active" onclick="RallFilter('all',this);">All</span> <span onclick="RallFilter('admin',this);">Admin</span> <span onclick="RallFilter('user',this);">User</span> <span onclick="RallFilter('client',this);">Client</span> </div> <div class="main-alignment"> <div class="one" datasearch="admin">one</div> <div class="two" datasearch="admin">two</div> <div class="three" datasearch="admin">three</div> <div class="four" datasearch="user">four</div> <div class="five" datasearch="user">five</div> <div class="six" datasearch="client">six</div> <div class="seven" datasearch="client">seven</div> <div class="eight" datasearch="admin">eight</div> <div class="nine" datasearch="user">nine</div> <div class="ten" datasearch="client">ten</div> </div> </div>

.main-alignment{ position:relative; margin: 0 auto; width: 100%; max-width: 650px; } .filterbar span.active{ background: #ffffff; color: #000; } .filterbar span:hover{ background: #ffffff; color: #000; padding: 18px 20px; } .filterbar{ position: relative; margin:0 auto; width: 100%; max-width: 650px; background:#ffc433; padding: 10px 0px; text-align: center; } .filterbar span{ color: white; padding: 19px 18px; cursor: pointer; } .one{ background:#ff6699; height:50px; width:100%; max-width: 650px; margin:10px 0px; } .two{ background:#ff9999; height:50px; width:100%; max-width: 650px; margin:10px 0px; } .three{ background:#ff00ff; height:50px; width:100%; max-width: 650px; margin:10px 0px; } .four{ background:#ffbf00; height:50px; width:100%; max-width: 650px; margin:10px 0px; } .five{ background:#ff8000; height:50px; width:100%; max-width: 650px; margin:10px 0px; } .six{ background:#913300; height:50px; width:100%; max-width: 650px; margin:10px 0px; } .seven{ background:#808080; height:50px; width:100%; max-width: 650px; margin:10px 0px; } .eight{ background: #ff8000; height:50px; width:100%; max-width: 650px; margin:10px 0px; } .nine{ background:#ff00ff; height:50px; width:100%; max-width: 650px; margin:10px 0px; } .ten{ background:#ff0040; height:50px; width:100%; max-width: 650px; margin:10px 0px; } h2{ text-align:center; background:blue; position:relative; left:50%; transform:translate(-50%); width:100%; max-width:650px; margin-bottom:30px; margin-top:30px; text-transform:uppercase; color:white; padding:15px; }

function RallFilter(str,obj){ $(".filterbar").children("span").removeClass("active"); $(".main-alignment").children("div").each(function(){ if(str == 'all'){ $(obj).addClass("active"); $(this).slideDown(); } if(str == 'admin'){ $(obj).addClass("active"); if($(this).attr('datasearch') == 'admin'){ $(this).slideDown(); }else{ $(this).hide(); } } if(str == 'user'){ $(obj).addClass("active"); if($(this).attr('datasearch') == 'user'){ $(this).slideDown(); }else{ $(this).hide(); } } if(str == 'client'){ $(obj).addClass("active"); if($(this).attr('datasearch') == 'client'){ $(this).slideDown(); }else{ $(this).hide(); } } }); }