I need help with filtering a list of content based on their class names. The goal is to show specific items when a user clicks on one of two menus. Some items have multiple classes and users should be able to filter by both menus simultaneously.
Currently, my issue is that each menu click does not reset the list of items being displayed. Instead, it filters based on what remains after the initial menu click.
Thank you for any assistance in resolving this problem.
$(document).ready(function () {
$('.filter li a').click(function () {
var partnerResources = $(this).attr('class');
$('.filter li').removeClass('active');
$(this).parent().addClass('active');
if (partnerResources == 'all') {
$('#list-area').children('div').fadeIn(500);
} else {
$('#list-area').children('div:not(.' + partnerResources + ')').fadeOut(500);
$('#list-area').children('div:has(.' + partnerResources + ')').fadeIn(500);
}
return false;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul class="filter">
<li class="active"><a href="#" class="all">All</a>
</li>
<li><a href="#" class="welcome-kit">Welcome Kit</a>
</li>
<li><a href="#" class="forms">Forms</a>
</li>
</ul>
<hr />
<ul class="filter">
<li class="active"><a href="#" class="all">All</a>
</li>
<li><a href="#" class="automotive">Automotive</a>
</li>
<li><a href="#" class="retail">Retail</a>
</li>
</ul>
<hr />
<div id="list-area">
<div class="welcome-kit retail">welcome retail</div>
<div class="forms">forms</div>
<div class="forms retail">forms retail</div>
<div class="welcome-kit automotive">welcome autmotive</div>
<div class="forms">forms</div>
<div class="welcome-kit forms">welcome forms</div>
<div class="welcome-kit automotive">welcome automotive</div>
<div class="welcome-kit">welcome</div>
<div class="welcome-kit forms">welcome forms</div>
<div class="forms">forms</div>
</div>