I have a list of content that I'd like to filter based on their class names. When someone clicks on one of the two menus, the content with that menu item's class should show. Some content items have more than one class and users can filter from both menus.

The problem with my code is that each menu click doesn't reset the list of items. It filters on the items left over after the first menu click.

Thanks in advance for your help.

```js
$(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;
    });
});
```

```html
<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>
```