Filtering content (jQuery)

Question

HTML:

<div class="filter">
    <a href="#category-1">category 1</a>
    <a href="#category-2">category 2</a>
</div>
<ul class="items">
    <li class="category-1">item 1</li>
    <li class="category-1">item 2</li>
    <li class="category-2">item 3</li>
    <li class="category-2">item 4</li>
</ul>

What I want is for example clicking on 'category 1' link should hide all other category items from the list.

I understand jQuery's .filter() selector can be used but I'm not sure how to implement it for my purpose here.

Thanks for your help!

Answer 1

Basically you'll be doing something like this: $('.items li').hide(); $('.category-1').show();

The first to hide all other menu items, the latter to show the selected ones :) You can simply put it in the onclick of the <a> tag.

Answer 2

$('div.filter').delegate('a', 'click', function (event) {
  $('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();

  event.preventDefault();
});