My goal is to display specific cards when a particular button is clicked, adding a class called category_btn_active to the clicked button. For example, if the user clicks on "Services", then the service cards will be shown. The filtering functionality works fine, but the issue arises with the line
$(this).addClass('category_btn_active').siblings().removeClass('category_btn_active')category_btn_active class remains on both buttons when another button is clicked. I want the class to only be added to the last clicked button. Where could the problem lie and what could be a suitable solution?
index.html:
<li><a href="#!" class="category_btn category_btn_active" data-filter="Services">Services</a></li>
<li><a href="#!" class="category_btn" data-filter="Static">Static Website</a></li>
<div class="Services service_itembox">
<img src="Assets/pic-1.jpg" alt="service image">
</div>
<div class="Static service_itembox">
<img src="Assets/pic-2.jpg" alt="service image">
</div>
index.js:
$(function () {
$(".category_btn").click(function () {
$(this).addClass('category_btn_active').siblings().removeClass('category_btn_active')
const value = $(this).attr('data-filter');
if(value == "Services"){
$('.service_itembox').show('slow');
}else{
$('.service_itembox').not('.'+value).hide('slow');
$('.service_itembox').filter('.'+value).show('slow');
}
});
});
style.css:
.category_btn_active{
color: white;
border-color:gray;
border-style:solid ;
border-width:0px 0px 1px 0px;
background-color: #019587;
padding: 8px;
font-size: 14px;
text-transform: uppercase;
}