I made a filter with jQuery and it works great, I also add a class to the button onclick but I want the class to be removed when clicking on another button (currently it adds the class everywhere).
$(function() {
$(".filter-name").click(function() {
selectedClass = $(this).attr("data-rel");
$(".filter-content div").not("." + selectedClass).hide();
$(this).toggleClass("active");
setTimeout(function() {
$("." + selectedClass).show();
});
});
});.active {
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="filters">
<button class="filter-name" data-rel="all">All</button>
<button class="filter-name" data-rel="a">A</button>
<button class="filter-name" data-rel="b">B</button>
</div>
<div id="content">
<div class="filter-content">
<div class="all a">a</div>
<div class="all b">b</div>
<div class="all a">a</div>
<div class="all a">a</div>
<div class="all b">b</div>
<div class="all a">a</div>
</div>
</div>