Show elements depending on html value of a tag

Question

I would like to accomplish the following with jquery :

When I click on this link

<a href="#">Cars</a>

I would like all divs like those

<div class="product">
    <div class="category">Cars</div>
</div>

to do something.

You get the idea, I have a menu with a list of categories, and a list of products, each containing a div with the category name, and I would like to make them hide/show.

Answer 1

I am not sure if i fully understand your question, but if you want the div class="category" cars to appear when cars link is clicked, follow this:

$("#menu a").click(function() {
   var value = $(this).html();

   $.each($(".category"), function(i, item) {
     if ($(item).html() == value) {
         $(item).parent().hide();
     }

   });
});

if you want to hide the div just replace $(item).show(); with $(item).hide();

Answer 2

Assuming:

<a href="#" class="highlight">Cars</a>

then:

$("a.highlight").click(function() {
  $("div.category").removeClass("category")
    .filter(":contains(" + $(this).text() + ")").addClass("highlight");
  return false;
});

What this does is add the category class to any category dvis that contain the text of the link. This can be modified to modify the parent product div if you want to do it that way too.

It works by first removing the class highlight from all category divs and then adding it to the ones that require it.