jQuery and multiple "category" selector

Question

html:

<ul id="selector">
    <li><a href="#" class="group1" rel="group1">group 1</a></li>
    <li><a href="#" class="group2" rel="group2">group 2</a></li>
    <li><a href="#" class="group3" rel="group3">group 3</a></li>    
</ul>
<ul id="elements">
    <li class="group1">1</li>
    <li class="group1 group2">1 and 2</li>
    <li class="group3">3</li>
    <li class="group1 group3">1 and 3</li>
    <li class="group2 group3">2 and 3</li>
    <li class="group2">2</li>
</ul>

jQuery:

$('#selector a').click(function(event){
    event.preventDefault();
    var $this = $(this),
        target = $this.attr('rel');
    $('#selector a').removeClass('active');
    $this.addClass('active');
    $('#elements li').addClass('inactive');
    $('#elements li.'+target).removeClass('inactive').addClass('active');
});

css:

#selector {margin: 10px 0; background: #eee; list-style: none; padding: 0px;}
#selector li {display: inline-block;}
#selector li a {display: block; margin: 0 4px; padding: 5px; background: #aaa;}
#selector li a.active {color: #fff;}

#elements {margin: 0px; padding: 0px; list-style: none; background: #eee;}
#elements li {display: inline-block; width: 100px; margin: 4px; text-align: center; background: #ccc; padding: 40px 0;}
#elements li.inactive {opacity: 0.2}

This simple piece of code show a little interface, allowing user to click a group selector element and higlight all alements that belong to that group. When other group button is clicked, then selection changes. What I would like to go from this point, is to be able to make "active" more than one group selector, with in the same time higlighting all element that belong to those two, three or more selecor elements clicked.

In other words - someone clicks group1 selector - elements that has that class are highlighted. Than someone clicks group2 - and only elements that belong to both of those groups are being highlighted. When someone "unclicks" group1 selector, only elements that have class2 are highlighted etc. When not any of the group selector is clicked - all elements have 100% opacity.

Can anybody show me where to start and how should I proceed from above code?

http://jsfiddle.net/Cyberek/MeG6S/ for a sample how it now works.

Answer 1

Here is a method for doing that, wrapping everything in a container and adding the class to that, using it to style the relevant items. Instead of all this class manipulation we can simply toggle the class that is clicked.

jsFiddle

JS

$('#selector a').click(function(event){
    event.preventDefault();
    var group = this.className;
    $('#container').toggleClass(group);
});

CSS

#container #elements li {opacity: 0.2}
#container.group1 #elements .group1,
#container.group2 #elements .group2,
#container.group3 #elements .group3 {opacity:1;}

#container.group1 #selector .group1,
#container.group2 #selector .group2,
#container.group3 #selector .group3{border:1px solid #000;}

Extension

If you only wanted to activate '1 and 2' when both 1 and 2 are active then you can extend it like this to cover all bases. A JavaScript alternative may be better for this if you have say 5+ groups.

jsFiddle

#container.group1 #elements .group1:not(.group2):not(.group3),
#container.group2 #elements .group2:not(.group1):not(.group3),
#container.group3 #elements .group3:not(.group1):not(.group2),
#container.group1.group2:not(.group3) #elements .group1.group2:not(.group3),
#container.group2.group3:not(.group1) #elements .group2.group3:not(.group1),
#container.group3.group1:not(.group2) #elements .group3.group1:not(.group2),
#container.group1.group2.group3 #elements .group1,
#container.group1.group2.group3 #elements .group2,
#container.group1.group2.group3 #elements .group3,
#container:not(.group1):not(.group2):not(.group3) #elements li {opacity:1;}