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 code showcases an interface where users can click group selector elements to highlight all elements belonging to that group. The goal is to allow multiple group selectors to be active at the same time, highlighting elements that belong to all selected groups simultaneously. If someone clicks on group1 selector, elements with that class are highlighted. Then if someone clicks on group2, only elements belonging to both groups are highlighted. If one of the group selectors is unclicked, only elements with the remaining group class are highlighted. When no group is selected, all elements have full opacity.
Any suggestions on how to modify the existing code to achieve this behavior?
Visit this link for an example of the current functionality.