I need help making the active class work on each category when clicked, shifting to the next one. I've tried implementing it but no luck so far.
$(document).ready(function() {
$('.list-inline-item').click(function() {
const value = $(this).attr('data-filter');
if (value == 'all') {
$('.clients').show('1000');
} else {
$('.clients').not('.' + value).hide('1000');
$('.clients').filter('.' + value).show('1000');
}
})
}).list-inline-item {
color: #000000;
background-color: white;
font-weight: 500;
padding: 15px;
}
.active {
color: #b42727;
background-color: white;
}
.list-inline-item:hover {
text-decoration: underline;
text-underline-offset: 5px;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid clientbox text-center py-5">
<div class="row">
<div class="col-12">
<ul>
<li class="list-inline-item active" data-filter="all">ALL</li>
<li class="list-inline-item" data-filter="B">B</li>
<li class="list-inline-item" data-filter="C">C</li>
<li class="list-inline-item" data-filter="D">D</li>
<li class="list-inline-item" data-filter="M">M</li>
<li class="list-inline-item" data-filter="U">U</li>
<li class="list-inline-item" data-filter="C">C</li>
</ul>
</div>
</div>
<div class="row g-3">
<div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
<div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
<div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
<div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
<div class="clients D col-6 col-md-4 col-lg-3"><img class=" img-fluid " src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>
<div class="clients D col-6 col-md-4 col-lg-3"><img class=" img-fluid " src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>
<div class="clients D col-6 col-md-4 col-lg-3"><img class=" img-fluid " src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>
<div class="clients D col-6 col-md-4 col-lg-3"><img class=" img-fluid " src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>
<div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
<div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
<div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
<div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>The code is functioning correctly, but I am having trouble making the active class specific to each category. I believe I need to modify the jQuery code, but I'm uncertain about how to do it.