Toggle not working as intended when element has multiple classes.

Toggle not working as intended when element has multiple classes.

I'm trying to show names based upon the category they are in. I'm using groceries as examples. I seem to be having trouble when something is listed in multiple categories, like tomatoes. When I hide everything but the fruit list, tomatoes are hidden since I'm also taking away the vegetable criteria from the toggle event. I want to see tomatoes in the fruit and the vegetable lists, not just when both of it's classes are activated (although it should show here too). The script is acting more like an "and" statement than an "or."


Should I use (assuming there is such a way) a toggle based on multiple classes? A "the class contains fruit or vegetable then toggle" type of match?   $(".fruit, .vegetable").toggle();


I'm still a jquery newb, but I think I may just be over thinking something that should be simple.


The fiddle:   http://jsfiddle.net/61nc1rpk/10/