CODEWITHSUNDEEP
javascriptjqueryfiltercategories
eozzy
eozzy

Reputation: 68670

Filtering content (jQuery)

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!

Upvotes: 1

Views: 712

Answers (2)

Matt
Matt

Reputation: 75317

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

  event.preventDefault();
});

Upvotes: 3

Wolph
Wolph

Reputation: 80031

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.

Upvotes: 0

Related Questions